feat: integrate nextjs fetch with graphql-client

- Allows us to set fetch option specific to Next.JS in graphql-client
cofacts · Feb 13, 2024 · 501c33d · 501c33d
1 parent 7fb1dad
commit 501c33d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git a/app/lib/gql.ts b/app/lib/gql.ts
@@ -0,0 +1,20 @@
+import { GraphQLClient } from 'graphql-request';
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+export { graphql } from '@/typegen/gql';
+
+/**
+ * @param operation
+ * @param variables - the variables for the operation
+ * @param fetchOptions - the options for NextJS's fetch
+ * @returns graphql-request's request result
+ */
+export function gql<TData = any, TVariables = Record<string, any>>(
+  operation: TypedDocumentNode<TData, TVariables>,
+  variables?: TVariables,
+  fetchOptions?: Parameters<typeof fetch>[1]
+) {
+  const client = new GraphQLClient(process.env.COFACTS_API_URL ?? '', {
+    fetch: (input, init) => fetch(input, { ...init, ...fetchOptions }),
+  });
+  return client.request(operation, { ...variables });
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,12 +1,10 @@
-import { request } from 'graphql-request';
-import { graphql } from '@/typegen/gql';
+import { gql, graphql } from '@/app/lib/gql';
 
 async function getData() {
-  return request(
-    process.env.COFACTS_API_URL ?? '',
+  return gql(
     graphql(/* GraphQL */ `
-      query LoadAPIStats {
-        allArticles: ListArticles {
+      query LoadAPIStats($bar: Boolean!) {
+        allArticles: ListArticles @skip(if: $bar) {
           totalCount
         }
         allRepliedArticles: ListArticles {
@@ -16,7 +14,9 @@ async function getData() {
           totalCount
         }
       }
-    `)
+    `),
+    { bar: false },
+    { next: { revalidate: 10 /* Only cache for 10 seconds */ } }
   );
 }
 

diff --git a/typegen/gql.ts b/typegen/gql.ts
@@ -13,7 +13,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n      query LoadAPIStats {\n        allArticles: ListArticles {\n          totalCount\n        }\n        allRepliedArticles: ListArticles {\n          totalCount\n        }\n        articlesHasUsefulReplies: ListArticles {\n          totalCount\n        }\n      }\n    ": types.LoadApiStatsDocument,
+    "\n      query LoadAPIStats($bar: Boolean!) {\n        allArticles: ListArticles @skip(if: $bar) {\n          totalCount\n        }\n        allRepliedArticles: ListArticles {\n          totalCount\n        }\n        articlesHasUsefulReplies: ListArticles {\n          totalCount\n        }\n      }\n    ": types.LoadApiStatsDocument,
 };
 
 /**
@@ -33,7 +33,7 @@ export function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n      query LoadAPIStats {\n        allArticles: ListArticles {\n          totalCount\n        }\n        allRepliedArticles: ListArticles {\n          totalCount\n        }\n        articlesHasUsefulReplies: ListArticles {\n          totalCount\n        }\n      }\n    "): (typeof documents)["\n      query LoadAPIStats {\n        allArticles: ListArticles {\n          totalCount\n        }\n        allRepliedArticles: ListArticles {\n          totalCount\n        }\n        articlesHasUsefulReplies: ListArticles {\n          totalCount\n        }\n      }\n    "];
+export function graphql(source: "\n      query LoadAPIStats($bar: Boolean!) {\n        allArticles: ListArticles @skip(if: $bar) {\n          totalCount\n        }\n        allRepliedArticles: ListArticles {\n          totalCount\n        }\n        articlesHasUsefulReplies: ListArticles {\n          totalCount\n        }\n      }\n    "): (typeof documents)["\n      query LoadAPIStats($bar: Boolean!) {\n        allArticles: ListArticles @skip(if: $bar) {\n          totalCount\n        }\n        allRepliedArticles: ListArticles {\n          totalCount\n        }\n        articlesHasUsefulReplies: ListArticles {\n          totalCount\n        }\n      }\n    "];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

diff --git a/typegen/graphql.ts b/typegen/graphql.ts
@@ -1390,10 +1390,12 @@ export type YdocVersion = {
   snapshot: Maybe<Scalars['String']['output']>;
 };
 
-export type LoadApiStatsQueryVariables = Exact<{ [key: string]: never; }>;
+export type LoadApiStatsQueryVariables = Exact<{
+  bar: Scalars['Boolean']['input'];
+}>;
 
 
 export type LoadApiStatsQuery = { allArticles: { totalCount: number } | null, allRepliedArticles: { totalCount: number } | null, articlesHasUsefulReplies: { totalCount: number } | null };
 
 
-export const LoadApiStatsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"LoadAPIStats"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"allArticles"},"name":{"kind":"Name","value":"ListArticles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allRepliedArticles"},"name":{"kind":"Name","value":"ListArticles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"articlesHasUsefulReplies"},"name":{"kind":"Name","value":"ListArticles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode<LoadApiStatsQuery, LoadApiStatsQueryVariables>;
+export const LoadApiStatsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"LoadAPIStats"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"bar"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"allArticles"},"name":{"kind":"Name","value":"ListArticles"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"skip"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"if"},"value":{"kind":"Variable","name":{"kind":"Name","value":"bar"}}}]}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allRepliedArticles"},"name":{"kind":"Name","value":"ListArticles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"articlesHasUsefulReplies"},"name":{"kind":"Name","value":"ListArticles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode<LoadApiStatsQuery, LoadApiStatsQueryVariables>;