diff --git a/README.md b/README.md index a39347f10..078437753 100644 --- a/README.md +++ b/README.md @@ -535,7 +535,7 @@ This Addon requires `graphql` v15.4.0 or later. To enable this feature, configur } ``` -When enabled generated files export a type based on [`TypedQueryDocumentNode`](https://github.com/graphql/graphql-js/blob/master/src/utilities/typedQueryDocumentNode.d.ts) from GraphQL. The type extends the standard `DocumentNode` AST type but also includes types for result data and variables as type arguments. +When enabled generated files export a type based on [`TypedQueryDocumentNode`](https://the-guild.dev/blog/typed-document-node) from GraphQL. The type extends the standard `DocumentNode` AST type but also includes types for result data and variables as type arguments. To use this feature you can apply a type assertion to `gql` template tag expressions that evaluate to a `DocumentNode` value. diff --git a/project-fixtures/react-apollo-prj/src/__generated__/git-hub-query.ts b/project-fixtures/react-apollo-prj/src/__generated__/git-hub-query.ts index 2fc8bff25..2e7d921a7 100644 --- a/project-fixtures/react-apollo-prj/src/__generated__/git-hub-query.ts +++ b/project-fixtures/react-apollo-prj/src/__generated__/git-hub-query.ts @@ -1,6 +1,6 @@ /* eslint-disable */ /* This is an autogenerated file. Do not edit this file directly! */ -import { TypedQueryDocumentNode } from "graphql"; +import { TypedDocumentNode } from "@graphql-typed-document-node/core"; export type RepositoryFragment = { description: string | null; }; @@ -16,4 +16,4 @@ export type GitHubQuery = { export type GitHubQueryVariables = { first: number; }; -export type GitHubQueryDocument = TypedQueryDocumentNode; +export type GitHubQueryDocument = TypedDocumentNode; diff --git a/project-fixtures/react-apollo-prj/src/__generated__/update-my-repository.ts b/project-fixtures/react-apollo-prj/src/__generated__/update-my-repository.ts index 9ab292af6..efb9f2561 100644 --- a/project-fixtures/react-apollo-prj/src/__generated__/update-my-repository.ts +++ b/project-fixtures/react-apollo-prj/src/__generated__/update-my-repository.ts @@ -1,6 +1,6 @@ /* eslint-disable */ /* This is an autogenerated file. Do not edit this file directly! */ -import { TypedQueryDocumentNode } from "graphql"; +import { TypedDocumentNode } from "@graphql-typed-document-node/core"; export type UpdateMyRepository = { updateRepository: ({ clientMutationId: string | null; @@ -9,4 +9,4 @@ export type UpdateMyRepository = { export type UpdateMyRepositoryVariables = { repositoryId: string; }; -export type UpdateMyRepositoryDocument = TypedQueryDocumentNode; +export type UpdateMyRepositoryDocument = TypedDocumentNode; diff --git a/project-fixtures/react-apollo-prj/src/index.tsx b/project-fixtures/react-apollo-prj/src/index.tsx index 4a0fc2ae4..14a1e482e 100644 --- a/project-fixtures/react-apollo-prj/src/index.tsx +++ b/project-fixtures/react-apollo-prj/src/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { gql, useQuery } from '@apollo/client'; -import { GitHubQuery, GitHubQueryVariables } from './__generated__/git-hub-query'; +import type { GitHubQueryDocument } from './__generated__/git-hub-query'; const repositoryFragment = gql` fragment RepositoryFragment on Repository { @@ -31,7 +31,7 @@ const mutation = gql` `; export default () => { - const { data } = useQuery(query, { variables: { first: 100 } }); + const { data } = useQuery(query as GitHubQueryDocument, { variables: { first: 100 } }); if (!data) return null; return (
    diff --git a/src/typegen-addons/__snapshots__/typed-query-document.test.ts.snap b/src/typegen-addons/__snapshots__/typed-query-document.test.ts.snap index bafa7ea61..94ae946ac 100644 --- a/src/typegen-addons/__snapshots__/typed-query-document.test.ts.snap +++ b/src/typegen-addons/__snapshots__/typed-query-document.test.ts.snap @@ -4,12 +4,12 @@ exports[`TypedQueryDocumentAddonFactory should add export statement using TypedQ [ "/* eslint-disable */ /* This is an autogenerated file. Do not edit this file directly! */ -import { TypedQueryDocumentNode } from "graphql"; +import { TypedDocumentNode } from "@graphql-typed-document-node/core"; export type MyQuery = { hello: string; }; export type MyQueryVariables = {}; -export type MyQueryDocument = TypedQueryDocumentNode; +export type MyQueryDocument = TypedDocumentNode; ", ] `; diff --git a/src/typegen-addons/typed-query-document.ts b/src/typegen-addons/typed-query-document.ts index 5e75db250..a97eefbcf 100644 --- a/src/typegen-addons/typed-query-document.ts +++ b/src/typegen-addons/typed-query-document.ts @@ -5,13 +5,14 @@ import { astf } from '../ts-ast-util'; export const TypedQueryDocumentAddonFactory: TypeGenAddonFactory = ({ source }) => ({ operationDefinition({ tsResultNode, tsVariableNode }) { const lhs = astf.createIdentifier(`${tsResultNode.name.text}Document`); - const rhs = astf.createTypeReferenceNode(astf.createIdentifier('TypedQueryDocumentNode'), [ + const rhs = astf.createTypeReferenceNode(astf.createIdentifier('TypedDocumentNode'), [ astf.createTypeReferenceNode(astf.createIdentifier(tsResultNode.name.text)), astf.createTypeReferenceNode(astf.createIdentifier(tsVariableNode.name.text)), ]); const modifiers = [astf.createModifier(ts.SyntaxKind.ExportKeyword)]; const typeAliasDeclaration = astf.createTypeAliasDeclaration(modifiers, lhs, undefined, rhs); - source.pushNamedImportIfNeeded('TypedQueryDocumentNode', 'graphql'); + // source.pushNamedImportIfNeeded('TypedQueryDocumentNode', 'graphql'); + source.pushNamedImportIfNeeded('TypedDocumentNode', '@graphql-typed-document-node/core'); source.pushStatement(typeAliasDeclaration); }, });