Allow GraphQL documents to be typed with a TypedDocumentNode for fully-typed result and variables objects

packages/internal/src/__tests__/clientPreset.test.ts

@@ -40,14 +40,13 @@ describe('Generate client preset', () => {
 
     const { clientPresetFiles } = await generateClientPreset()
 
-    expect(clientPresetFiles).toHaveLength(6)
+    expect(clientPresetFiles).toHaveLength(5)
     const expectedEndings = [
       '/fragment-masking.ts',
       '/index.ts',
       '/gql.ts',
       '/graphql.ts',
       '/persisted-documents.json',
-      '/types.d.ts',
     ]
 
     const foundEndings = expectedEndings.filter((expectedEnding) =>

packages/internal/src/generate/clientPreset.ts

@@ -32,27 +32,6 @@ export const generateClientPreset = async () => {
     schema: getPaths().generated.schema,
     documents: documentsGlob,
     generates: {
-      // should be graphql.d.ts
-      [`${getPaths().web.base}/types/types.d.ts`]: {
-        plugins: ['typescript', 'typescript-operations', 'add'],
-        config: {
-          enumsAsTypes: true,
-          content: 'import { Prisma } from "@prisma/client"',
-          placement: 'prepend',
-          scalars: {
-            // We need these, otherwise these scalars are mapped to any
-            BigInt: 'number',
-            // @Note: DateTime fields can be valid Date-strings, or the Date object in the api side. They're always strings on the web side.
-            DateTime: 'string',
-            Date: 'string',
-            JSON: 'Prisma.JsonValue',
-            JSONObject: 'Prisma.JsonObject',
-            Time: 'string',
-          },
-          namingConvention: 'keep', // to allow camelCased query names
-          omitOperationSuffix: true,
-        },
-      },
       [`${getPaths().web.src}/graphql/`]: {
         preset: 'client',
         presetConfig: {

packages/web/src/components/GraphQLHooksProvider.tsx

@@ -3,8 +3,11 @@ import type {
   useBackgroundQuery as apolloUseBackgroundQuery,
   useReadQuery as apolloUseReadQuery,
 } from '@apollo/client'
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core'
 import type { DocumentNode } from 'graphql'
 
+export type { TypedDocumentNode }
+
 /**
  * @NOTE
  * The types QueryOperationResult, MutationOperationResult, SubscriptionOperationResult, and SuspenseQueryOperationResult
@@ -19,31 +22,31 @@ type DefaultUseQueryType = <
   TData = any,
   TVariables extends OperationVariables = GraphQLOperationVariables
 >(
-  query: DocumentNode,
+  query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: GraphQLQueryHookOptions<TData, TVariables>
 ) => QueryOperationResult<TData, TVariables>
 
 type DefaultUseMutationType = <
   TData = any,
   TVariables = GraphQLOperationVariables
 >(
-  mutation: DocumentNode,
+  mutation: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: GraphQLMutationHookOptions<TData, TVariables>
 ) => MutationOperationResult<TData, TVariables>
 
 type DefaultUseSubscriptionType = <
   TData = any,
   TVariables extends OperationVariables = GraphQLOperationVariables
 >(
-  subscription: DocumentNode,
+  subscription: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: GraphQLSubscriptionHookOptions<TData, TVariables>
 ) => SubscriptionOperationResult<TData, TVariables>
 
 type DefaultUseSuspenseType = <
   TData = any,
   TVariables extends OperationVariables = GraphQLOperationVariables
 >(
-  query: DocumentNode,
+  query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: GraphQLSuspenseQueryHookOptions<TData, TVariables>
 ) => SuspenseQueryOperationResult<TData, TVariables>
 
@@ -152,7 +155,7 @@ export function useQuery<
   TData = any,
   TVariables extends OperationVariables = GraphQLOperationVariables
 >(
-  query: DocumentNode,
+  query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: GraphQLQueryHookOptions<TData, TVariables>
 ): QueryOperationResult<TData, TVariables> {
   return React.useContext(GraphQLHooksContext).useQuery<TData, TVariables>(
@@ -165,7 +168,7 @@ export function useMutation<
   TData = any,
   TVariables = GraphQLOperationVariables
 >(
-  mutation: DocumentNode,
+  mutation: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: GraphQLMutationHookOptions<TData, TVariables>
 ): MutationOperationResult<TData, TVariables> {
   return React.useContext(GraphQLHooksContext).useMutation<TData, TVariables>(
@@ -178,7 +181,7 @@ export function useSubscription<
   TData = any,
   TVariables extends OperationVariables = GraphQLOperationVariables
 >(
-  query: DocumentNode,
+  query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: GraphQLSubscriptionHookOptions<TData, TVariables>
 ): SubscriptionOperationResult<TData, TVariables> {
   return React.useContext(GraphQLHooksContext).useSubscription<
@@ -191,7 +194,7 @@ export function useSuspenseQuery<
   TData = any,
   TVariables extends OperationVariables = GraphQLOperationVariables
 >(
-  query: DocumentNode,
+  query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: GraphQLSuspenseQueryHookOptions<TData, TVariables>
 ): SuspenseQueryOperationResult<TData, TVariables> {
   return React.useContext(GraphQLHooksContext).useSuspenseQuery<

packages/web/src/index.ts

@@ -38,3 +38,5 @@ export * from './components/htmlTags'
 export * from './routeHooks.types'
 
 export * from './components/ServerInject'
+
+export type { TypedDocumentNode } from './components/GraphQLHooksProvider'