search

dotansimha / graphql-code-generator-community

MIT License
112 stars 142 forks source link

Generated useInfiniteQuery hook code has typescript error with spread operator being applied on `metadata.pageParams` (`unknown` type) #583

Open anthonyn60 opened 7 months ago

anthonyn60 commented 7 months ago

Which packages are impacted by your issue?

@graphql-codegen/typescript-react-query

Describe the bug

The generated hook code for infinite queries applies the spread operator on metaData.pageParam, which is of type unknown. Typescript complains about this.

Your Example Website or App

/

Steps to Reproduce the Bug or Issue

My query has an after variable with a custom fetcher that has this signature:

export const graphQLFetch = <TData, TVariables>(
  query: string,
  variables?: TVariables,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  options?: RequestInit["headers"]
): ((variables?: TVariables) => Promise<TData>) => {

My query looks like:

query GetFulfillmentOrdersForIndex(
  $first: Int!
  $after: String
  $orderBy: FulfillmentOrderSortInput
  ...
) {
  fulfillmentOrders(
    first: $first
    after: $after
    orderBy: $orderBy
    ...
  ) {
    edges {
      node {
         ...      
       }
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

Expected behavior

The generated code is free of errors from Typescript. If the spread operator needs to be applied here (to pass the page variables into the query), perhaps the generated code could cast metadata.pageParam into an object?

Screenshots or Videos

Screenshot 2024-01-24 at 12 32 55 AM

Platform

Codegen Config File

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = { overwrite: true, schema: "graphql/schema.graphql", documents: "*/.graphql", generates: { "graphql/generated.ts": { plugins: [ "typescript", "typescript-operations", "typescript-react-query" ], config: { exposeFetcher: true, exposeMutationKeys: true, exposeQueryKeys: true, enumsAsConst: true, addInfiniteQuery: true, reactQueryVersion: 5, fetcher: { func: "./graphql-fetch#graphQLFetch", isReactHook: false } } }, "graphql/graphql.schema.json": { plugins: ["introspection"] } } };

export default config;

Additional context

No response

gjdame commented 7 months ago

I am also having this same problem. Any update on this or did you find a solution @anthonyn60 ?

anthonyn60 commented 7 months ago

I have not @gjdame

I saw someone else ran into it here, also without a solution: https://github.com/dotansimha/graphql-code-generator-community/pull/434#issuecomment-1909138484