-
Notifications
You must be signed in to change notification settings - Fork 20
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Failed to compile in React Typescript with graphql-typed-document-node #131
Comments
I believe the issue is in the generated document. If I use There might be something wrong with the generated AllChannelsDocument vs React/TS Compiler? |
Maybe related to #130 |
I have updated the example apollo-client-3 and added a quick create-react-app to demonstrate the build error when adding |
Hi @devfromfinland, did you find a solution to this problem? Already struggling for quite some time with this. |
Hello, this issue still persists with 3.2.0, but pinning to 3.1.0 solves it for me. I am using Astrojs + svelte, and other recommended things from urql typescript integration guide. |
Same issue is ocuring in Next.js v12 when using it together with the lastest |
Facing the same issue here using URQL together with Astro v3: This is not typed: import { GetProductsDocument } from "../graphql/types"
const products = await urql.query(GetProductsDocument, { first: 10 }) // this is not typed This is typed correctly: import { GetProductsDocument } from "../graphql/types"
import type {
GetProductsQuery,
GetProductsQueryVariables,
} from "../graphql/types"
const products = await urql.query<GetProductsQuery, GetProductsQueryVariables>(
GetProductsDocument,
{ first: 10 },
) package.json "dependencies": {
"@astrojs/cloudflare": "^7.0.1",
"@astrojs/tailwind": "^5.0.0",
"@urql/core": "^4.1.2",
"astro": "^3.0.8",
"autoprefixer": "^10.4.15",
"tailwindcss": "^3.3.3",
"zod": "^3.22.2"
},
"devDependencies": {
"@graphql-codegen/cli": "5.0.0",
"@graphql-codegen/typed-document-node": "^5.0.1",
"@graphql-codegen/typescript": "4.0.1",
"@graphql-codegen/typescript-operations": "^4.0.1",
"@graphql-typed-document-node/core": "^3.2.0",
"prettier": "^3.0.3",
"prettier-plugin-astro": "^0.12.0",
"prettier-plugin-tailwindcss": "^0.5.4",
"wrangler": "^3.7.0"
} codegen.ts: import type { CodegenConfig } from "@graphql-codegen/cli"
const config: CodegenConfig = {
overwrite: true,
schema: "./schema.json",
documents: "src/graphql/**/*.gql",
generates: {
"src/graphql/types.ts": {
plugins: ["typescript", "typescript-operations", "typed-document-node"],
config: {
useTypeImports: true,
},
},
},
}
export default config import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
// ...
export type GetProductsQueryVariables = Exact<{
first: Scalars['Int']['input'];
}>;
export type GetProductsQuery = { __typename?: 'QueryRoot', products: { __typename?: 'ProductConnection', edges: Array<{ __typename?: 'ProductEdge', node: { __typename?: 'Product', id: string, title: string, handle: string, images: { __typename?: 'ImageConnection', nodes: Array<{ __typename?: 'Image', url: any, width?: number | null, height?: number | null, altText?: string | null }> }, variants: { __typename?: 'ProductVariantConnection', nodes: Array<{ __typename?: 'ProductVariant', id: string, title: string, availableForSale: boolean, price: { __typename?: 'MoneyV2', amount: any, currencyCode: CurrencyCode } }> }, featuredImage?: { __typename?: 'Image', url: any, width?: number | null, height?: number | null, altText?: string | null } | null } }> } };
export const GetProductsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getProducts"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"first"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"Variable","name":{"kind":"Name","value":"first"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"handle"}},{"kind":"Field","name":{"kind":"Name","value":"images"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"10"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}},{"kind":"Field","name":{"kind":"Name","value":"altText"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"variants"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"10"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"availableForSale"}},{"kind":"Field","name":{"kind":"Name","value":"price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}},{"kind":"Field","name":{"kind":"Name","value":"currencyCode"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"featuredImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}},{"kind":"Field","name":{"kind":"Name","value":"altText"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetProductsQuery, GetProductsQueryVariables>; |
Hi, I'm trying out your library. The example works fine for me, but when I apply it to my app, it failed to compile.
I have generated the types from backend schema and frontend operations. The file looks like this
My query:
My functional component:
If I use
useQuery(ALL_CHANNELS)
, it works but without type.If I use
useQuery(AllChannelsDocument)
, I can see the type showing, but it failed to run the React App.Here is the error message
I have searched stackoverflow and found that I should downgrade react-scripts to 4.0.1. I did but it doesn't help resolving the issue.
Package versions in root (monorepo)
Package versions in React App
I couldn't find any requirement regarding compileOptions for your library to work with React. I wonder what is the cause of this issue? (btw, I had to downgrade graphql to v15 for it to work with your example)
The text was updated successfully, but these errors were encountered: