feat(WEB-103): create request client to be able to use next caching

app/[lang]/(live-current)/current-content-page/page.tsx

@@ -24,6 +24,9 @@ export default async function CurrentContentPage({
       {
         locale: params.lang,
         url: searchParams.uri,
+      },
+      {
+        tags: [`${searchParams.uri}-${params.lang}`]
       }
     )
 

components/Current/Footer/index.tsx

@@ -9,9 +9,15 @@ import type { GetFooterData } from "@/types/requests/footer"
 import type { LangParams } from "@/types/params"
 
 export default async function Footer({ lang }: LangParams) {
-  const response = await request<GetFooterData>(GetFooter, {
+  const response = await request<GetFooterData>(
-    locale: lang,
+    GetFooter,
-  })
+    {
+      locale: lang,
+    },
+    {
+      tags: [`footer-${lang}`]
+    }
+  )
 
   const footerData = response.data.all_footer.items[0]
   return (

components/Current/Header/index.tsx

@@ -15,8 +15,6 @@ import type { HeaderQueryData } from "@/types/requests/header"
 import type { HeaderProps } from "@/types/components/current/header"
 import type { LanguageSwitcherQueryData } from "@/types/requests/languageSwitcher"
 
-
-
 export default async function Header({ lang, uid }: LangParams & HeaderProps) {
   try {
     const variables = {
@@ -24,14 +22,16 @@ export default async function Header({ lang, uid }: LangParams & HeaderProps) {
       uid,
     }
 
-    const { data } = await request<HeaderQueryData>(GetHeader, { locale: lang })
+    const { data } = await request<HeaderQueryData>(GetHeader, { locale: lang }, { tags: [`header-${lang}`] })
     const { data: urls } = await batchRequest<LanguageSwitcherQueryData>([
       {
         document: GetDaDeEnUrls,
+        tags: [`DA-DE-EN-${uid}`],
         variables,
       },
       {
         document: GetFiNoSvUrls,
+        tags: [`FI-NO-SV-${uid}`],
         variables,
       },
     ])

lib/batchRequest.ts

@@ -4,10 +4,10 @@ import { request } from "./request"
 import type { Data } from "@/types/request"
 import type { BatchRequestDocument } from "graphql-request"
 
-export async function batchRequest<T>(queries: BatchRequestDocument[]): Promise<Data<T>> {
+export async function batchRequest<T>(queries: (BatchRequestDocument & NextFetchRequestConfig)[]): Promise<Data<T>> {
   try {
     const response = await Promise.allSettled(
-      queries.map(query => request<T>(query.document, query.variables))
+      queries.map(query => request<T>(query.document, query.variables, { tags: query.tags }))
     )
 
     let data = {} as T

lib/request.ts

@@ -1,21 +1,27 @@
 import "server-only"
-import { request as graphqlRequest } from "graphql-request"
+import { GraphQLClient } from "graphql-request"
 import { env } from "@/env/server"
+import { cache } from "react"
 
 import type { Data } from "@/types/request"
 import type { DocumentNode } from "graphql"
 
 export async function request<T>(
   query: string | DocumentNode,
-  variables?: {}
+  variables?: {},
+  next?: NextFetchRequestConfig
 ): Promise<Data<T>> {
   try {
-    if (env.PRINT_QUERY) {
+    const client = new GraphQLClient(env.CMS_URL, {
-      const graphqlRawRequest = (await import("graphql-request")).rawRequest
+      fetch: cache(async function (url: URL | RequestInfo, params: RequestInit | undefined) {
-      const print = (await import("graphql/language/printer")).print
+        return fetch(url, params)
+      }),
+      next,
+    })
 
-      const rawResponse = await graphqlRawRequest<T>(
+    if (env.PRINT_QUERY) {
-        env.CMS_URL,
+      const print = (await import("graphql/language/printer")).print
+      const rawResponse = await client.rawRequest<T>(
         print(query as DocumentNode),
         variables,
         {
@@ -40,13 +46,12 @@ export async function request<T>(
       }
     }
 
-    const response = await graphqlRequest<T>({
+    const response = await client.request<T>({
       document: query,
       requestHeaders: {
         access_token: env.CMS_ACCESS_TOKEN,
         "Content-Type": "application/json",
       },
-      url: env.CMS_URL,
       variables,
     })