From 74b05ed6a075c77d0725c6efa2b251b77b1cd432 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Mon, 3 Jun 2024 15:18:00 +0200 Subject: [PATCH] feat: add edge request function --- .../current-content-page/page.tsx | 9 +-- .../Header/MainMenu/mainMenu.module.css | 1 + lib/graphql/_request.ts | 74 +++++++++++++++++++ lib/graphql/batchRequest.ts | 4 +- lib/graphql/edgeRequest.ts | 20 +++++ lib/graphql/request.ts | 55 ++------------ .../routers/contentstack/accountPage/query.ts | 6 +- .../routers/contentstack/breadcrumbs/utils.ts | 6 +- .../routers/contentstack/loyaltyPage/query.ts | 6 +- .../contentstack/myPages/navigation/query.ts | 6 +- utils/entry.ts | 30 +++----- 11 files changed, 122 insertions(+), 95 deletions(-) create mode 100644 lib/graphql/_request.ts create mode 100644 lib/graphql/edgeRequest.ts diff --git a/app/[lang]/(live-current)/current-content-page/page.tsx b/app/[lang]/(live-current)/current-content-page/page.tsx index 8b46a3a7a..209bded9a 100644 --- a/app/[lang]/(live-current)/current-content-page/page.tsx +++ b/app/[lang]/(live-current)/current-content-page/page.tsx @@ -5,7 +5,6 @@ import { GetCurrentBlockPageTrackingData } from "@/lib/graphql/Query/CurrentBloc import { request } from "@/lib/graphql/request" import ContentPage from "@/components/Current/ContentPage" -import Header from "@/components/Current/Header" import Tracking from "@/components/Current/Tracking" import type { LangParams, PageArgs, UriParams } from "@/types/params" @@ -27,9 +26,7 @@ export default async function CurrentContentPage({ locale: params.lang, url: searchParams.uri, }, - { - next: { tags: [`${searchParams.uri}-${params.lang}`] }, - } + { tags: [`${searchParams.uri}-${params.lang}`] } ) if (!response.data?.all_current_blocks_page?.total) { @@ -43,9 +40,7 @@ export default async function CurrentContentPage({ const pageDataForTracking = await request( GetCurrentBlockPageTrackingData, { uid: response.data.all_current_blocks_page.items[0].system.uid }, - { - next: { tags: [`${searchParams.uri}-en`] }, - } + { tags: [`${searchParams.uri}-en`] } ) const pageData = response.data.all_current_blocks_page.items[0] diff --git a/components/Current/Header/MainMenu/mainMenu.module.css b/components/Current/Header/MainMenu/mainMenu.module.css index e159b06a5..7a824eb34 100644 --- a/components/Current/Header/MainMenu/mainMenu.module.css +++ b/components/Current/Header/MainMenu/mainMenu.module.css @@ -275,6 +275,7 @@ .logo { width: 102.17px; height: 100%; + padding-bottom: 4px; } .listWrapper { diff --git a/lib/graphql/_request.ts b/lib/graphql/_request.ts new file mode 100644 index 000000000..6b4c254d1 --- /dev/null +++ b/lib/graphql/_request.ts @@ -0,0 +1,74 @@ +import "server-only" + +import { GraphQLClient } from "graphql-request" + +import { env } from "@/env/server" + +import type { DocumentNode } from "graphql" + +import type { Data } from "@/types/request" + +export async function request( + client: GraphQLClient, + query: string | DocumentNode, + variables?: {}, + next?: NextFetchRequestConfig +): Promise> { + try { + if (next) { + client.requestConfig.next = next + } + + if (env.PRINT_QUERY) { + const print = (await import("graphql/language/printer")).print + const rawResponse = await client.rawRequest( + print(query as DocumentNode), + variables, + { + access_token: env.CMS_ACCESS_TOKEN, + "Content-Type": "application/json", + } + ) + + /** + * TODO: Send to Monitoring (Logging and Metrics) + */ + console.log({ + complexityLimit: rawResponse.headers.get("x-query-complexity"), + }) + console.log({ + referenceDepth: rawResponse.headers.get("x-reference-depth"), + }) + console.log({ resolverCost: rawResponse.headers.get("x-resolver-cost") }) + + return { + data: rawResponse.data, + } + } + + const print = (await import("graphql/language/printer")).print + const nr = Math.random() + console.log(`START REQUEST ${nr}`) + console.time(`OUTGOING REQUEST ${nr}`) + console.log(`Sending reqeust to ${env.CMS_URL}`) + console.log(`Query:`, print(query as DocumentNode)) + console.log(`Variables:`, variables) + + const response = await client.request({ + document: query, + requestHeaders: { + access_token: env.CMS_ACCESS_TOKEN, + "Content-Type": "application/json", + }, + variables, + }) + + console.timeEnd(`OUTGOING REQUEST ${nr}`) + console.log({ response }) + + return { data: response } + } catch (error) { + console.error(error) + throw new Error("Something went wrong") + } +} diff --git a/lib/graphql/batchRequest.ts b/lib/graphql/batchRequest.ts index e0208970b..10e5835fd 100644 --- a/lib/graphql/batchRequest.ts +++ b/lib/graphql/batchRequest.ts @@ -12,9 +12,7 @@ export async function batchRequest( try { const response = await Promise.allSettled( queries.map((query) => - request(query.document, query.variables, { - next: { tags: query.tags }, - }) + request(query.document, query.variables, { tags: query.tags }) ) ) diff --git a/lib/graphql/edgeRequest.ts b/lib/graphql/edgeRequest.ts new file mode 100644 index 000000000..c1e3f53f3 --- /dev/null +++ b/lib/graphql/edgeRequest.ts @@ -0,0 +1,20 @@ +import { DocumentNode } from "graphql" +import { GraphQLClient } from "graphql-request" + +import { env } from "@/env/server" + +import { request as _request } from "./_request" + +import { Data } from "@/types/request" + +const client = new GraphQLClient(env.CMS_URL, { + fetch: fetch, +}) + +export async function edgeRequest( + query: string | DocumentNode, + variables?: {}, + next?: NextFetchRequestConfig +): Promise> { + return _request(client, query, variables, next) +} diff --git a/lib/graphql/request.ts b/lib/graphql/request.ts index f27a4ecb5..71952e7af 100644 --- a/lib/graphql/request.ts +++ b/lib/graphql/request.ts @@ -1,16 +1,14 @@ -import "server-only" - +import { DocumentNode } from "graphql" import { GraphQLClient } from "graphql-request" import { cache } from "react" import { env } from "@/env/server" -import type { DocumentNode } from "graphql" +import { request as _request } from "./_request" -import type { Data } from "@/types/request" +import { Data } from "@/types/request" const client = new GraphQLClient(env.CMS_URL, { - cache: "force-cache", fetch: cache(async function ( url: URL | RequestInfo, params: RequestInit | undefined @@ -22,50 +20,7 @@ const client = new GraphQLClient(env.CMS_URL, { export async function request( query: string | DocumentNode, variables?: {}, - options?: Pick + next?: NextFetchRequestConfig ): Promise> { - if (options?.cache) { - client.requestConfig.cache = options.cache - } - if (options?.next) { - client.requestConfig.next = options.next - } - - if (env.PRINT_QUERY) { - const { print } = await import("graphql") - const rawResponse = await client.rawRequest( - print(query as DocumentNode), - variables, - { - access_token: env.CMS_ACCESS_TOKEN, - "Content-Type": "application/json", - } - ) - - /** - * TODO: Send to Monitoring (Logging and Metrics) - */ - console.log({ - complexityLimit: rawResponse.headers.get("x-query-complexity"), - }) - console.log({ - referenceDepth: rawResponse.headers.get("x-reference-depth"), - }) - console.log({ resolverCost: rawResponse.headers.get("x-resolver-cost") }) - - return { - data: rawResponse.data, - } - } - - const response = await client.request({ - document: query, - requestHeaders: { - access_token: env.CMS_ACCESS_TOKEN, - "Content-Type": "application/json", - }, - variables, - }) - - return { data: response } + return _request(client, query, variables, next) } diff --git a/server/routers/contentstack/accountPage/query.ts b/server/routers/contentstack/accountPage/query.ts index dc72edd54..5e348898e 100644 --- a/server/routers/contentstack/accountPage/query.ts +++ b/server/routers/contentstack/accountPage/query.ts @@ -37,9 +37,7 @@ export const accountPageQueryRouter = router({ uid, }, { - next: { - tags: [generateRefsResponseTag(lang, uid)], - }, + tags: [generateRefsResponseTag(lang, uid)], } ) @@ -71,7 +69,7 @@ export const accountPageQueryRouter = router({ locale: lang, uid, }, - { next: { tags } } + { tags } ) if (!response.data) { diff --git a/server/routers/contentstack/breadcrumbs/utils.ts b/server/routers/contentstack/breadcrumbs/utils.ts index b1e9869cc..6a3cc6d04 100644 --- a/server/routers/contentstack/breadcrumbs/utils.ts +++ b/server/routers/contentstack/breadcrumbs/utils.ts @@ -68,9 +68,7 @@ export type Variables = { export async function getRefsResponse(query: string, variables: Variables) { const refsResponse = await request(query, variables, { - next: { - tags: [generateRefsResponseTag(variables.locale, variables.url, affix)], - }, + tags: [generateRefsResponseTag(variables.locale, variables.url, affix)], }) if (!refsResponse.data) { throw notFound(refsResponse) @@ -91,7 +89,7 @@ export async function getResponse( variables: Variables, tags: string[] ) { - const response = await request(query, variables, { next: { tags } }) + const response = await request(query, variables, { tags }) if (!response.data) { throw notFound(response) } diff --git a/server/routers/contentstack/loyaltyPage/query.ts b/server/routers/contentstack/loyaltyPage/query.ts index 511f4c9c0..4bf440066 100644 --- a/server/routers/contentstack/loyaltyPage/query.ts +++ b/server/routers/contentstack/loyaltyPage/query.ts @@ -54,9 +54,7 @@ export const loyaltyPageQueryRouter = router({ uid, }, { - next: { - tags: [generateRefsResponseTag(lang, uid)], - }, + tags: [generateRefsResponseTag(lang, uid)], } ) @@ -90,7 +88,7 @@ export const loyaltyPageQueryRouter = router({ locale: lang, uid, }, - { next: { tags } } + { tags } ) if (!response.data) { diff --git a/server/routers/contentstack/myPages/navigation/query.ts b/server/routers/contentstack/myPages/navigation/query.ts index b9f619231..c13153a55 100644 --- a/server/routers/contentstack/myPages/navigation/query.ts +++ b/server/routers/contentstack/myPages/navigation/query.ts @@ -60,9 +60,7 @@ export const navigationQueryRouter = router({ GetNavigationMyPagesRefs, { locale: lang }, { - next: { - tags: [generateRefsResponseTag(lang, "navigation_my_pages")], - }, + tags: [generateRefsResponseTag(lang, "navigation_my_pages")], } ) @@ -90,7 +88,7 @@ export const navigationQueryRouter = router({ const response = await request( GetNavigationMyPages, { locale: lang }, - { next: { tags } } + { tags } ) if (!response.data) { diff --git a/utils/entry.ts b/utils/entry.ts index bd308cc08..c66f42e0e 100644 --- a/utils/entry.ts +++ b/utils/entry.ts @@ -1,31 +1,23 @@ -import { DocumentNode, print } from "graphql" - import { Lang } from "@/constants/languages" -import { env } from "@/env/server" +import { edgeRequest } from "@/lib/graphql/edgeRequest" import { ResolveEntryByUrl } from "@/lib/graphql/Query/ResolveEntry.graphql" import { internalServerError } from "@/server/errors/next" import { validateEntryResolveSchema } from "@/types/requests/entry" export async function resolve(url: string, lang = Lang.en) { - const result = await fetch(env.CMS_URL, { - method: "POST", - headers: { - access_token: env.CMS_ACCESS_TOKEN, - "Content-Type": "application/json", + const response = await edgeRequest( + ResolveEntryByUrl, + { + locale: lang, + url, }, - body: JSON.stringify({ - query: print(ResolveEntryByUrl as DocumentNode), - variables: { - locale: lang, - url, - }, - }), - }) + { + revalidate: 3600, + } + ) - const { data } = await result.json() - - const validatedData = validateEntryResolveSchema.safeParse(data) + const validatedData = validateEntryResolveSchema.safeParse(response.data) if (!validatedData.success) { throw internalServerError(validatedData.error)