chore: strapiv5 intermediate migration step

jumperexchange · Feb 6, 2025 · d382bb7 · d382bb7
1 parent 498c81a
commit d382bb7
Show file tree

Hide file tree

Showing 17 changed files with 48 additions and 33 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -27,12 +27,12 @@ const nextConfig = {
   },
   images: {
     remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'raw.githubusercontent.com',
-        port: '',
+      (process.env.NODE_ENV === 'development' && {
+        protocol: 'http',
+        hostname: 'localhost',
+        port: '1337',
         pathname: '/**',
-      },
+      }),
       {
         protocol: 'https',
         hostname: 'assets.coingecko.com',

diff --git a/src/app/lib/getArticleBySlug.ts b/src/app/lib/getArticleBySlug.ts
@@ -8,6 +8,7 @@ export async function getArticleBySlug(slug: string) {
   const res = await fetch(decodeURIComponent(apiUrl), {
     cache: 'force-cache',
     headers: {
+      'Strapi-Response-Format': 'v4',
       Authorization: `Bearer ${accessToken}`,
     },
   });

diff --git a/src/app/lib/getArticles.ts b/src/app/lib/getArticles.ts
@@ -20,6 +20,7 @@ export async function getArticles(
   const res = await fetch(decodeURIComponent(apiUrl), {
     cache: 'force-cache',
     headers: {
+      'Strapi-Response-Format': 'v4',
       Authorization: `Bearer ${accessToken}`,
     },
   });

diff --git a/src/app/lib/getArticlesByTag.ts b/src/app/lib/getArticlesByTag.ts
@@ -12,6 +12,7 @@ export async function getArticlesByTag(
   const res = await fetch(decodeURIComponent(apiUrl), {
     cache: 'force-cache',
     headers: {
+      'Strapi-Response-Format': 'v4',
       Authorization: `Bearer ${accessToken}`,
     },
   });

diff --git a/src/app/lib/getExtendedQuestBySlug.ts b/src/app/lib/getExtendedQuestBySlug.ts
@@ -13,6 +13,7 @@ export async function getExtQuestBySlug(
   const res = await fetch(decodeURIComponent(apiUrl), {
     cache: 'force-cache',
     headers: {
+      'Strapi-Response-Format': 'v4',
       Authorization: `Bearer ${accessToken}`,
     },
   });

diff --git a/src/app/lib/getFeaturedArticle.ts b/src/app/lib/getFeaturedArticle.ts
@@ -8,6 +8,7 @@ export async function getFeaturedArticle() {
   const res = await fetch(decodeURIComponent(apiUrl), {
     cache: 'force-cache',
     headers: {
+      'Strapi-Response-Format': 'v4',
       Authorization: `Bearer ${accessToken}`,
     },
   });

diff --git a/src/app/lib/getPartnerThemes.ts b/src/app/lib/getPartnerThemes.ts
@@ -15,6 +15,7 @@ export async function getPartnerThemes(): Promise<GetPartnerThemeResponse> {
   const res = await fetch(decodeURIComponent(apiUrl), {
     cache: 'force-cache',
     headers: {
+      'Strapi-Response-Format': 'v4',
       Authorization: `Bearer ${accessToken}`,
     },
   });

diff --git a/src/app/lib/getQuestsBy.ts b/src/app/lib/getQuestsBy.ts
@@ -11,6 +11,7 @@ export async function getQuestsBy(key: string, value: string) {
   const res = await fetch(decodeURIComponent(apiUrl), {
     cache: 'force-cache',
     headers: {
+      'Strapi-Response-Format': 'v4',
       Authorization: `Bearer ${accessToken}`,
     },
   });

diff --git a/src/app/lib/getTags.ts b/src/app/lib/getTags.ts
@@ -58,9 +58,11 @@ export async function getTags(): Promise<GetTagsResponse> {
   const res = await fetch(decodeURIComponent(apiUrl), {
     cache: 'force-cache',
     headers: {
+      'Strapi-Response-Format': 'v4',
       Authorization: `Bearer ${accessToken}`,
     },
   });
+
   if (!res.ok) {
     throw new Error('Failed to fetch data');
   }

diff --git a/src/hooks/useMemelist.ts b/src/hooks/useMemelist.ts
@@ -21,7 +21,7 @@ export const useMemelist = ({ enabled }: UseMemeProps): UseMemelistProps => {
   //filter url
   apiUrl.searchParams.set('filters[uid][$eq]', 'memecoins');
   process.env.NEXT_PUBLIC_ENVIRONMENT !== 'production' &&
-    apiUrl.searchParams.set('publicationState', 'preview');
+    apiUrl.searchParams.set('status', 'draft');
   const apiAccesToken =
     process.env.NEXT_PUBLIC_STRAPI_DEVELOP === 'true'
       ? process.env.NEXT_PUBLIC_LOCAL_STRAPI_API_TOKEN
@@ -31,6 +31,7 @@ export const useMemelist = ({ enabled }: UseMemeProps): UseMemelistProps => {
     queryFn: async () => {
       const response = await fetch(decodeURIComponent(apiUrl.href), {
         headers: {
+          'Strapi-Response-Format': 'v4',
           Authorization: `Bearer ${apiAccesToken}`,
         },
       });

diff --git a/src/hooks/useOngoingFestMissions.ts b/src/hooks/useOngoingFestMissions.ts
@@ -39,7 +39,7 @@ export const useOngoingFestMissions = (): UseQuestsProps => {
   apiUrl.searchParams.set('filters[StartDate][$lte]', currentDate);
   apiUrl.searchParams.set('filters[EndDate][$gte]', currentDate);
   process.env.NEXT_PUBLIC_ENVIRONMENT !== 'production' &&
-    apiUrl.searchParams.set('publicationState', 'preview');
+  apiUrl.searchParams.set('status', 'draft');
   const apiAccesToken =
     process.env.NEXT_PUBLIC_STRAPI_DEVELOP === 'true'
       ? process.env.NEXT_PUBLIC_LOCAL_STRAPI_API_TOKEN
@@ -50,6 +50,7 @@ export const useOngoingFestMissions = (): UseQuestsProps => {
     queryFn: async () => {
       const response = await fetch(decodeURIComponent(apiUrl.href), {
         headers: {
+          'Strapi-Response-Format': 'v4',
           Authorization: `Bearer ${apiAccesToken}`,
         },
       });

diff --git a/src/hooks/useOngoingQuests.ts b/src/hooks/useOngoingQuests.ts
@@ -44,7 +44,7 @@ export const useOngoingQuests = (label?: string): UseQuestsProps => {
   apiUrl.searchParams.set('filters[StartDate][$lte]', currentDate);
   apiUrl.searchParams.set('filters[EndDate][$gte]', currentDate);
   process.env.NEXT_PUBLIC_ENVIRONMENT !== 'production' &&
-    apiUrl.searchParams.set('publicationState', 'preview');
+    apiUrl.searchParams.set('status', 'draft');
   const apiAccesToken =
     process.env.NEXT_PUBLIC_STRAPI_DEVELOP === 'true'
       ? process.env.NEXT_PUBLIC_LOCAL_STRAPI_API_TOKEN
@@ -55,6 +55,7 @@ export const useOngoingQuests = (label?: string): UseQuestsProps => {
     queryFn: async () => {
       const response = await fetch(decodeURIComponent(apiUrl.href), {
         headers: {
+          'Strapi-Response-Format': 'v4',
           Authorization: `Bearer ${apiAccesToken}`,
         },
       });

diff --git a/src/hooks/usePersonalizedFeatureCards.ts b/src/hooks/usePersonalizedFeatureCards.ts
@@ -42,19 +42,19 @@ export const usePersonalizedFeatureCards =
         : `${process.env.NEXT_PUBLIC_STRAPI_URL}/api`;
     const apiUrl = new URL(`${apiBaseUrl}/${STRAPI_CONTENT_TYPE}`);
 
-    apiUrl.searchParams.set('populate[BackgroundImageLight]', '*');
-    apiUrl.searchParams.set('populate[BackgroundImageDark]', '*');
+    apiUrl.searchParams.set('populate[0]', 'BackgroundImageLight');
+    apiUrl.searchParams.set('populate[1]', 'BackgroundImageDark');
     apiUrl.searchParams.set(
-      'populate[featureCardsExclusions][fields][0]',
-      'uid',
+      'populate[2]',
+      'featureCardsExclusions',
     );
     apiUrl.searchParams.set('filters[PersonalizedFeatureCard]', 'true');
     fcCardData?.map((id: number) =>
       apiUrl.searchParams.set('filters[id][]', id.toString()),
     );
 
     process.env.NEXT_PUBLIC_ENVIRONMENT !== 'production' &&
-      apiUrl.searchParams.set('publicationState', 'preview');
+    apiUrl.searchParams.set('status', 'draft');
     const apiAccesToken =
       process.env.NEXT_PUBLIC_STRAPI_DEVELOP === 'true'
         ? process.env.NEXT_PUBLIC_LOCAL_STRAPI_API_TOKEN
@@ -66,6 +66,7 @@ export const usePersonalizedFeatureCards =
       queryFn: async () => {
         const response = await fetch(decodeURIComponent(apiUrl.href), {
           headers: {
+            'Strapi-Response-Format': 'v4',
             Authorization: `Bearer ${apiAccesToken}`,
           },
         });

diff --git a/src/hooks/usePersonalizedFeatureOnLevel.ts b/src/hooks/usePersonalizedFeatureOnLevel.ts
@@ -29,16 +29,16 @@ export const usePersonalizedFeatureOnLevel = ({
       : `${process.env.NEXT_PUBLIC_STRAPI_URL}/api`;
   const apiUrl = new URL(`${apiBaseUrl}/${STRAPI_CONTENT_TYPE}`);
 
-  apiUrl.searchParams.set('populate[BackgroundImageLight]', '*');
-  apiUrl.searchParams.set('populate[BackgroundImageDark]', '*');
-  apiUrl.searchParams.set('populate[featureCardsExclusions][fields][0]', 'uid');
+  apiUrl.searchParams.set('populate[0]', 'BackgroundImageLight');
+  apiUrl.searchParams.set('populate[1]', 'BackgroundImageDark');
+  apiUrl.searchParams.set('populate[2]', 'featureCardsExclusions');
   apiUrl.searchParams.set('filters[PersonalizedFeatureCard][$nei]', 'false');
   // filter to get only the personalized feature cards that have the correct levels setup
   apiUrl.searchParams.set('filters[minlevel][$lte]', String(level));
   apiUrl.searchParams.set('filters[maxLevel][$gte]', String(level));
 
   process.env.NEXT_PUBLIC_ENVIRONMENT !== 'production' &&
-    apiUrl.searchParams.set('publicationState', 'preview');
+  apiUrl.searchParams.set('status', 'draft');
   const apiAccesToken =
     process.env.NEXT_PUBLIC_STRAPI_DEVELOP === 'true'
       ? process.env.NEXT_PUBLIC_LOCAL_STRAPI_API_TOKEN
@@ -49,6 +49,7 @@ export const usePersonalizedFeatureOnLevel = ({
     queryFn: async () => {
       const response = await fetch(decodeURIComponent(apiUrl.href), {
         headers: {
+          'Strapi-Response-Format': 'v4',
           Authorization: `Bearer ${apiAccesToken}`,
         },
       });

diff --git a/src/hooks/useStrapi.ts b/src/hooks/useStrapi.ts
@@ -147,11 +147,11 @@ export const useStrapi = <T>({
   // feature cards -->
   if (contentType === STRAPI_FEATURE_CARDS) {
     // populate images on feature card query
-    apiUrl.searchParams.set('populate[BackgroundImageLight]', '*');
-    apiUrl.searchParams.set('populate[BackgroundImageDark]', '*');
+    apiUrl.searchParams.set('populate[0]', 'BackgroundImageLight');
+    apiUrl.searchParams.set('populate[1]', 'BackgroundImageDark');
     apiUrl.searchParams.set(
-      'populate[featureCardsExclusions][fields][0]',
-      'uid',
+      'populate[2]',
+      'featureCardsExclusions',
     );
     apiUrl.searchParams.set('filters[PersonalizedFeatureCard][$nei]', 'true');
     //filter url
@@ -167,12 +167,12 @@ export const useStrapi = <T>({
 
   // partner-themes -->
   if (contentType === STRAPI_PARTNER_THEMES) {
-    apiUrl.searchParams.set('populate[BackgroundImageLight]', '*');
-    apiUrl.searchParams.set('populate[BackgroundImageDark]', '*');
-    apiUrl.searchParams.set('populate[FooterImageLight]', '*');
-    apiUrl.searchParams.set('populate[FooterImageDark]', '*');
-    apiUrl.searchParams.set('populate[LogoLight]', '*');
-    apiUrl.searchParams.set('populate[LogoDark]', '*');
+    apiUrl.searchParams.set('populate[0]', 'BackgroundImageLight');
+    apiUrl.searchParams.set('populate[1]', 'BackgroundImageDark');
+    apiUrl.searchParams.set('populate[2]', 'FooterImageLight');
+    apiUrl.searchParams.set('populate[3]', 'FooterImageDark');
+    apiUrl.searchParams.set('populate[4]', 'LogoLight');
+    apiUrl.searchParams.set('populate[5]', 'LogoDark');
 
     // filter partner-themes by "uid"
     if (filterUid) {
@@ -181,7 +181,7 @@ export const useStrapi = <T>({
   }
   // show drafts ONLY on development env
   process.env.NEXT_PUBLIC_ENVIRONMENT === 'development' &&
-    apiUrl.searchParams.set('publicationState', 'preview');
+  apiUrl.searchParams.set('status', 'draft');
   process.env.NEXT_PUBLIC_ENVIRONMENT === 'development' &&
     apiUrl.searchParams.set('pagination[pageSize]', '50');
 
@@ -196,6 +196,7 @@ export const useStrapi = <T>({
     queryFn: async () => {
       const response = await fetch(decodeURIComponent(apiUrl.href), {
         headers: {
+          'Strapi-Response-Format': 'v4',
           Authorization: `Bearer ${apiAccesToken}`,
         },
       });

diff --git a/src/utils/strapi/StrapiApi.ts b/src/utils/strapi/StrapiApi.ts
@@ -36,7 +36,7 @@ class StrapiApi {
 
     // Show drafts ONLY on development env
     if (process.env.NEXT_PUBLIC_ENVIRONMENT === 'development') {
-      this.apiUrl.searchParams.set('publicationState', 'preview');
+      this.apiUrl.searchParams.set('status', 'draft');
     }
   }
 
@@ -195,7 +195,7 @@ class QuestStrapiApi extends StrapiApi {
     const questParams = new QuestParams(this.apiUrl);
     this.apiUrl = questParams.addParams();
     process.env.NEXT_PUBLIC_ENVIRONMENT !== 'production' &&
-      this.apiUrl.searchParams.set('publicationState', 'preview');
+    this.apiUrl.searchParams.set('status', 'draft');
   }
 
   sort(order: 'asc' | 'desc'): this {

diff --git a/tests/e2e.spec.ts b/tests/e2e.spec.ts
@@ -186,9 +186,9 @@ test.describe('Jumper full e2e flow', () => {
         Authorization: bearerToken,
       },
       params: {
-        'populate[BackgroundImageLight]': '*',
-        'populate[BackgroundImageDark]': '*',
-        'populate[featureCardsExclusions][fields][0]': 'uid',
+        'populate[0]': 'BackgroundImageLight',
+        'populate[1]': 'BackgroundImageDark',
+        'populate[2]': 'featureCardsExclusions',
         'filters[PersonalizedFeatureCard][%24nei]': 'false',
         'filters[minlevel][%24lte]': '4',
         'filters[maxLevel][%24gte]': '4',