question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-query plugin with graphql-request fetcher generates invalid infinite query if query has no arguments

See original GitHub issue

Describe the bug

The latest version introduces an issue where, if an infinite query has no arguments, the react-query plugin generates invalid types.

Your Example Website or App

/

Steps to Reproduce the Bug or Issue

  1. write a query without arguments
  2. observe type error in generated code

The error comes from the 3rd argument passed to fetcher:

error TS2345: Argument of type '{ [x: string]: any; }' is not assignable to parameter of type 'Exact<{ [key: string]: never; }>'.
  'string' index signatures are incompatible.
    Type 'any' is not assignable to type 'never'.

Expected behavior

No error.

Screenshots or Videos

No response

Platform

  • OS: macOS
  • NodeJS: 16.7.1
  • graphql version: 16.6.0
    "@graphql-codegen/cli": "^2.13.7",
    "@graphql-codegen/typescript": "^2.8.0",
    "@graphql-codegen/typescript-graphql-request": "^4.5.7",
    "@graphql-codegen/typescript-operations": "^2.5.5",
    "@graphql-codegen/typescript-react-query": "^4.0.3",

Codegen Config File

scalars omitted to keep it short

overwrite: true
generates:
  src/modules/common/generated/client.graphql.ts:
    documents: "src/**/*.graphql"
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-query"
    config:
      dedupeFragments: true
      immutableTypes: true
      skipTypename: true
      maybeValue: T | null | undefined
      namingConvention:
        enumValues: keep
        typeNames: keep
      strictScalars: true
      fetcher: graphql-request
      exposeQueryKeys: true
      addInfiniteQuery: true

Additional context

Only happens in latest version.

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:14
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
EandrewJonescommented, Nov 19, 2022

Sorry for the delay on this folks. I promise I’m going to spend time on the fix tomorrow.

I doubt it’ll involve adding a new parameter to the config file to specify which queries have infiniteQuery generated for them (though that type of fine grained control would be cool). I think some simple type checking and conditional statements will suffice.

On Sat, Nov 19, 2022, 1:55 AM Wiley McKay Conte @.***> wrote:

How can you set config like addInfiniteQuery: false for a specific subset of .graphql files?

— Reply to this email directly, view it on GitHub https://github.com/dotansimha/graphql-code-generator/issues/8517#issuecomment-1320819085, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ2T6ANPFNQWZ6WS264JH4LWJB2VHANCNFSM6AAAAAARM2FP6A . You are receiving this because you commented.Message ID: @.***>

0reactions
wileymccommented, Nov 19, 2022

How can you set config like addInfiniteQuery: false for a specific subset of .graphql files?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Infinite Queries | TanStack Query Docs
When using useInfiniteQuery , you'll notice a few things are different: data is now an object containing infinite query data: data.pages array containing...
Read more >
graphql-code-generator - Bountysource
The latest version introduces an issue where, if an infinite query has no arguments, the react-query plugin generates invalid types.
Read more >
Getting started with React Query and GraphQL - Hasura
In this guide, we'll set up our project to take full advantage of asynchronous GraphQL with subscriptions, and auto-generate our hooks using ...
Read more >
typescript-react-query - GraphQL Code Generator
This plugin generates React-Query Hooks with TypeScript typings. ... If you are using graphql-request , you can set fetcher to ...
Read more >
Caching clash: SWR vs. TanStack Query for React
Now that we have an overview of SWR's features for optimized data fetching in React, let's create a sample app with SWR and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found