optimize home page api request

leon-luna-ray · Feb 12, 2024 · b784a85 · b784a85
1 parent 90dd811
commit b784a85
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 55 deletions.
diff --git a/src/lib/api.js b/src/lib/api.js
@@ -14,47 +14,50 @@ export function getImageUrl(source) {
   return builder.image(source);
 }
 
-export async function fetchGlobal() {
-  const query = `*[_type == "globalSettings"]`;
-  const global = await client.fetch(query);
-
-  return global;
-}
-
-export async function fetchFeaturedProjects() {
-  const query = `*[_type == "project" && featured] | order(_updatedAt desc) {
+// 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,
-      intro,
+      title,
+      altText,
       description,
-      mainImage,
-      slug,
-      status,
+    }
+  }`
+const queryProjectGroup = (slug) => {
+  return `*[_type == "projectGroup" && slug.current == "${slug}"] | order(title asc) {
+      _id,
       title,
-      url,
-      repository,
-    }`;
-  const projects = await client.fetch(query);
-
-  return projects;
-}
-
-export async function fetchProfile() {
-  const query = `*[_type == "profileDetails"][0]`;
-  const profile = await client.fetch(query);
-
-  return profile;
-}
-
-export async function fetchHobbies() {
-  const query = `*[_type == "profileDetails"][0] { "hobbies" : hobbies[] -> {title} }`;
-  const hobbies = await client.fetch(query);
-
-  return hobbies;
+      slug,
+      description,
+      projects[]->{
+        _id, 
+        intro, 
+        "mainImage": mainImage.asset->{
+          _id,
+          title,
+          altText,
+          description,
+        }, 
+        slug, 
+        status, 
+        title, 
+        technologies[]->{_id, title, slug,},
+      },
+    }[0]`;
 }
 
-export async function fetchSkills() {
-  const query = `*[_type == "skillsList"] | order(title) {title, "skills" : skills[] -> {title, website}}`;
-  const skills = await client.fetch(query);
-
-  return skills;
+// API Requests
+export async function fetchHomePage() {
+  const query = `{
+      "global": ${queryGlobalSettings},
+      "profile": ${queryProfile},
+      "projects": ${queryProjectGroup('backend-projects')},
+      "skillsGroups": ${querySkillsGroups}
+  }`;
+  const data = await client.fetch(query);
+
+  return data;
 }
diff --git a/src/store/GlobalContext.jsx b/src/store/GlobalContext.jsx
@@ -5,11 +5,8 @@ import React, {
     useState
 } from "react";
 import {
-    fetchProfile,
-    fetchGlobal,
-    fetchSkills,
-    fetchFeaturedProjects,
-    getImageUrl
+    getImageUrl,
+    fetchHomePage,
 } from "../lib/api";
 
 const GlobalContext = createContext();
@@ -29,18 +26,15 @@ export function GlobalProvider({ children }) {
     useEffect(() => {
         const fetchData = async () => {
             try {
-                const profileData = await fetchProfile();
-                const globalData = await fetchGlobal();
-                const skillsData = await fetchSkills();
-                const projectsData = await fetchFeaturedProjects();
-
-                setSkills(skillsData);
-                setProfile(profileData);
-                setGlobal(globalData[0]);
-                setProjects(projectsData);
-
-                if (profileData?.image) {
-                    setProfileImage(getImageUrl(profileData.image).size(300, 300).url());
+                const data = await fetchHomePage();
+
+                setSkills(data?.skillsGroups);
+                setProfile(data?.profile);
+                setGlobal(data?.global);
+                setProjects(data?.projects.projects);
+
+                if (data?.profile.image) {
+                    setProfileImage(getImageUrl(data?.profile.image).size(300, 300).url());
                 }
             } catch (err) {
                 console.error(err);