optimize home page api request

leon-luna-ray · Feb 12, 2024 · 6cd7e75 · 6cd7e75
1 parent 8444754
commit 6cd7e75
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 62 deletions.
diff --git a/src/js/main.js b/src/js/main.js
@@ -4,17 +4,13 @@ import { router } from '@/js/router';
 
 import {
   getImageUrl,
-  fetchProfile,
-  fetchSkills,
-  fetchProjectGroup,
   portableTextToHTML,
+  fetchHomePage
 } from "./sanity";
 
 window.Alpine = Alpine;
 
-const profile = await fetchProfile();
-const skills = await fetchSkills();
-const projects = await fetchProjectGroup('backend-projects');
+const data = await fetchHomePage();
 
 function getThumbnailUrl(image) {
   return getImageUrl(image).width(600).url();
@@ -37,11 +33,11 @@ Alpine.store("darkMode", {
 });
 
 Alpine.store("data", {
-  skills: skills || [],
-  profile: profile,
-  image: profile.image,
-  projectsIntro: portableTextToHTML(projects.description) || "",
-  projects: projects.projects || [],
+  skills: data?.skillsGroups || [],
+  profile: data?.profile || {},
+  image: data?.profile.image,
+  projectsIntro: portableTextToHTML(data?.projects.description) || "",
+  projects: data?.projects.projects || [],
   getThumbnailUrl,
 });
 

diff --git a/src/js/sanity.js b/src/js/sanity.js
@@ -2,11 +2,6 @@ import { createClient } from '@sanity/client';
 import imageUrlBuilder from '@sanity/image-url';
 import { toHTML } from '@portabletext/to-html'
 
-
-export function portableTextToHTML(portableTextBlocks) {
-  return toHTML(portableTextBlocks)
-}
-
 export const client = createClient({
   projectId: import.meta.env.VITE_SANITY_PROJECT_ID,
   dataset: import.meta.env.VITE_SANITY_DATASET,
@@ -20,59 +15,54 @@ export function getImageUrl(source) {
   return builder.image(source);
 }
 
-export async function fetchProfile() {
-  const query = `*[_type == "profileDetails"][0]{
+export function portableTextToHTML(portableTextBlocks) {
+  return toHTML(portableTextBlocks)
+}
+
+// API Queries
+const queryGlobalSettings = `*[_type == "globalSettings"][0]`
+const querySkillsGroups = `*[_type == "skillsList"] | order(title) {title, "skills" : skills[] -> {title, website}}`;
+const queryProfile = `*[_type == "profileDetails"][0]{
     ...,
     "image": image.asset->{
       _id,
       title,
       altText,
       description,
-    },
-  }`;
-  const profile = await client.fetch(query);
-
-  return profile;
-}
-
-export async function fetchSkills() {
-  const query = `*[_type == "skillsList"] | order(title) {title, "skills" : skills[] -> {title, website}}`;
-  const skills = await client.fetch(query);
-
-  return skills;
+    }
+  }`
+const queryProjectGroup = (slug) => {
+  return `*[_type == "projectGroup" && slug.current == "${slug}"] | order(title asc) {
+      _id,
+      title,
+      slug,
+      description,
+      projects[]->{
+        _id, 
+        intro, 
+        "mainImage": mainImage.asset->{
+          _id,
+          title,
+          altText,
+          description,
+        }, 
+        slug, 
+        status, 
+        title, 
+        technologies[]->{_id, title, slug,},
+      },
+    }[0]`;
 }
 
-export async function fetchFeaturedProjects() {
-  const query = `*[_type == "project" && featured] | order(_updatedAt desc)`;
-  const projects = await client.fetch(query);
-
-  return projects;
-}
-export async function fetchProjectGroup(slug) {
-  const query = `*[_type == "projectGroup" && slug.current == "${slug}"] | order(title asc) {
-    _id,
-    title,
-    slug,
-    description,
-    projects[]->{
-      _id, 
-      intro, 
-      "mainImage": mainImage.asset->{
-        _id,
-        title,
-        altText,
-        description,
-      }, 
-      slug, 
-      status, 
-      title, 
-      technologies[]->{_id, title, slug,},
-      url,
-      customUrl,
-    },
+// API Requests
+export async function fetchHomePage() {
+  const query = `{
+      "global": ${queryGlobalSettings},
+      "profile": ${queryProfile},
+      "projects": ${queryProjectGroup('backend-projects')},
+      "skillsGroups": ${querySkillsGroups}
   }`;
+  const data = await client.fetch(query);
 
-  const projectGroup = await client.fetch(query);
-
-  return projectGroup[0];
-}
+  return data;
+}