dotansimha / dotansimha/graphql-code-generator-community

[typescript react-query] vue-query not compatible since 6.0.0 and tanstack v5

Open
#538 1 comment 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

### Which packages are impacted by your issue?

_No response_

### Describe the bug

Until now you could replace @tanstack/react-query by @tanstack/vue-query and the plugin would work seamlessly.

Following the support of Tanstack v5 through this [change](https://github.com/dotansimha/graphql-code-generator-community/pull/434) this is not possible anymore as typescript is not resolving query options correctly.

The problem is a combination of the introduction of :

`options?: Omit<${query.getOptions()}<${operationResultType}, TError, TData>, 'queryKey'> & { queryKey?: ${query.getOptions()}<${operationResultType}, TError, TData>['queryKey'] }`
from the codegen plugin

and changes made to UseQueryOptions in @tanstack/vue-query.

[Here](https://www.typescriptlang.org/play?ts=5.3.2#code/FDCWDsBcFMCcDMCGBjaACAStA5qAzjLGgN7AC+IkAngA7oAi0SArgDaQCissA9kQLyYc+QmmgAPGOAAmeEsDSK00pojadufAFxoI8OGgAqXXrADc5NAH4jJvmh13zlWugCKzOFQDS0KmkEsRGkecFYqAEFuRCoAHmZwAGtwHgB3cAA+CxVkVkRYdGRQgiF4AGUqAFsAIx5WHQTQAEdPNDwq2tYLMCg4JFRS2MMAtERwKgz5JTQAN0RWTx1DC2mAegAqdYVp9aNXZVB4fQKoUERIe1DwgDptpV2AdXRwaGhpNEgAC3wPnjRq9AQNA0ZjVVigZDKa6QOTVZiQZShADkCNSYwRoARFzanzSaGYNF04DQAEl6Bw7opdmoLkVKjRWNAYAAaNp-VLoZh4dCIYGwUBzGBoCo1OpEgjQYK3aZodarSkAbSw5Q6dQAujpILBPBYKNQ6GgAAr8yqYgXoQQEfngbBoAA+aHAzBqBgdtTqkuJbtAuCg9raqtY-oSKngEDe-qdrC6LgNAFkYgDlUNJoEmCn-ctgPr0ABVcCpWCIGgAGUl8BGxtApsg5v9ADEEsha6F-fRzugHU5-VhsBxxISHQmaLExlRWWPJg6nohEsPR+MJ+Mp8KmQuJv6Z4kymvJ9loLl8oVigiyp95qw0sqE7BEnAGuBmq12qKY9n9meL1f08NBJORsmhiTAAZFMSgKp+0bfvAN53rAapWJq2rQLqFg5mgABCiDcoYrhyJaWoQLaDpOi6RBujwHpjBYEg0HwGK9AgKDoMq+aFsWWGgKwuF0HIpAUDkeQFGgRTgCUGCIKkIqdA+T7oC+nT7oewmiSUkGXqkQTNuasH3vij4tPJgbdOhbFFjQyplNWDLQBmgjDBIUiyGgjbgNprYOlhOF4T2TC+fAZkcYgXE8dAeAKneVA8BWrEFuZnHcXhar+qQ0xKpJ0nqohHzIbq1hGA4BWOdAMhyPOegGN4rIVUQABqkw2POVVoIFFlMFZ9KMrE9WTEsYiSCVzlbuV4DHGgzU1Wg9X5cNxaxM1rWWdZXU9YVDkDaVq6QLEk3TTYO7bYt7XLbZq19cVm1bgdO2jQYe1oFda5HeUJ3dRkvVFRtzlBCEYSRNEcT-jYqXgd4RJoJF0VGBqLVxcWS2dbZhgKt4apZJY51fXIPDVAAVgeCKgSDigQeeUGaZK2kzNAunwdlLzU84ZD5cTaAKoa4OQxWhgwxzF3OQpYo2MjhrJToz1DOzaN5Us3S0fRHz7BLQEjOtTlyOp0E3WN921Wt-Xq4Mu0NbD7FtS9iNvYVz0dTZKYmfsjDQDQyupp9hutWWiAVsL+v83IyaTbmJtOy7cPm7Ewd+1jJDM8DirGjwdCwNQnN+FDPM6KHyvs7wyfUNLGOm+ZgEZLG6AJlQSZMKHdloJX1fwEMBuDXIrnucSvuY4bOP482LMJ3ncCp0CXPQzoDfQMqtci0PKdUIXzNLOj6GT8qADysAAOJMoQddrz+K4ABRHwAlAEkyGKfaH7A8mKfFgLSgAU0hDKyYP+xD6fc27wxE4qAB9cGqMdDEDIKhEAEBCD9HcJ4WAVB17VG5LARm68aAtjEkMDwXh6zgHbJAXkggEjJDSOAVkxhNACDQIwFg7AnDkPwYQow2D4G4MYeQlhVBGGq04Ww84iAOFwJ8H4Fum1OG+H8IIcRfhyGGkQNgaAciiyVBGAzOAkxP6cLQRgvAWChF8IIeQ+hzChHsJMV4CRsj5GKPyIgSokxWYEHmNAQw1ZoD02dACJmkDGIwLQFo9BoBih6JwXg-hIxiEpHSEYyhIwaFqDoZQhh4T7K8LCYY8x8CJGiOctIyR-ihGWKMHIhRSi7GqOgIzBxlJDJZL8NlQweTdQ+OgcxNAO9IC5mQZwkg+JkHZWII6Ox0AdBWiImgZmFB3wGi6dAAJOiQmsPSUwyJpCYmmDiaodQxjDDcNSfo5ZgivB7MyVQAxAjTnZM0YUkRUibkbkEAfJurNc5J2Hv4Ue38CleEQcg1BgTgmNIOWYihphkkZKBcc-hRy6kTF5nPVOn8kS1LOeAJE+UtFILgP8hZkKlkgp2SCzhZjs7h0Ank96rz84L0KonalOS5BIhKogMEbx0WNUTFPJgm8Ol70xX8uA2igmYLxaiglSSjBEtMdCy5fgMhUveWjQqTza53y+I-Zgz83ixH5diwVAKRVpPFWCyVMrRVSosXK1kyL7lInlXSxV6MyDo2megIVxQd4vCLDAaQoURjrxrJHbk8zhW6I6bM2AnDWSrOie0pkEbOEZGtSiiRdq0BEzQCm+pOgxwTJAKpBEScdE6HdWJT1cAOy+v2IIRxBDGSuMqCMtAABWWUaAABsAAGNtABGTt-bmTkGAEAA) is a minimal reproduction of the typing problem.

I will try to get a code reproduction if needed

### Your Example Website or App

https://www.typescriptlang.org/play?ts=5.3.2#code/FDCWDsBcFMCcDMCGBjaACAStA5qAzjLGgN7AC+IkAngA7oAi0SArgDaQCissA9kQLyYc+QmmgAPGOAAmeEsDSK00pojadufAFxoI8OGgAqXXrADc5NAH4jJvmh13zlWugCKzOFQDS0KmkEsRGkecFYqAEFuRCoAHmZwAGtwHgB3cAA+CxVkVkRYdGRQgiF4AGUqAFsAIx5WHQTQAEdPNDwq2tYLMCg4JFRS2MMAtERwKgz5JTQAN0RWTx1DC2mAegAqdYVp9aNXZVB4fQKoUERIe1DwgDptpV2AdXRwaGhpNEgAC3wPnjRq9AQNA0ZjVVigZDKa6QOTVZiQZShADkCNSYwRoARFzanzSaGYNF04DQAEl6Bw7opdmoLkVKjRWNAYAAaNp-VLoZh4dCIYGwUBzGBoCo1OpEgjQYK3aZodarSkAbSw5Q6dQAujpILBPBYKNQ6GgAAr8yqYgXoQQEfngbBoAA+aHAzBqBgdtTqkuJbtAuCg9raqtY-oSKngEDe-qdrC6LgNAFkYgDlUNJoEmCn-ctgPr0ABVcCpWCIGgAGUl8BGxtApsg5v9ADEEsha6F-fRzugHU5-VhsBxxISHQmaLExlRWWPJg6nohEsPR+MJ+Mp8KmQuJv6Z4kymvJ9loLl8oVigiyp95qw0sqE7BEnAGuBmq12qKY9n9meL1f08NBJORsmhiTAAZFMSgKp+0bfvAN53rAapWJq2rQLqFg5mgABCiDcoYrhyJaWoQLaDpOi6RBujwHpjBYEg0HwGK9AgKDoMq+aFsWWGgKwuF0HIpAUDkeQFGgRTgCUGCIKkIqdA+T7oC+nT7oewmiSUkGXqkQTNuasH3vij4tPJgbdOhbFFjQyplNWDLQBmgjDBIUiyGgjbgNprYOlhOF4T2TC+fAZkcYgXE8dAeAKneVA8BWrEFuZnHcXhar+qQ0xKpJ0nqohHzIbq1hGA4BWOdAMhyPOegGN4rIVUQABqkw2POVVoIFFlMFZ9KMrE9WTEsYiSCVzlbuV4DHGgzU1Wg9X5cNxaxM1rWWdZXU9YVDkDaVq6QLEk3TTYO7bYt7XLbZq19cVm1bgdO2jQYe1oFda5HeUJ3dRkvVFRtzlBCEYSRNEcT-jYqXgd4RJoJF0VGBqLVxcWS2dbZhgKt4apZJY51fXIPDVAAVgeCKgSDigQeeUGaZK2kzNAunwdlLzU84ZD5cTaAKoa4OQxWhgwxzF3OQpYo2MjhrJToz1DOzaN5Us3S0fRHz7BLQEjOtTlyOp0E3WN921Wt-Xq4Mu0NbD7FtS9iNvYVz0dTZKYmfsjDQDQyupp9hutWWiAVsL+v83IyaTbmJtOy7cPm7Ewd+1jJDM8DirGjwdCwNQnN+FDPM6KHyvs7wyfUNLGOm+ZgEZLG6AJlQSZMKHdloJX1fwEMBuDXIrnucSvuY4bOP482LMJ3ncCp0CXPQzoDfQMqtci0PKdUIXzNLOj6GT8qADysAAOJMoQddrz+K4ABRHwAlAEkyGKfaH7A8mKfFgLSgAU0hDKyYP+xD6fc27wxE4qAB9cGqMdDEDIKhEAEBCD9HcJ4WAVB17VG5LARm68aAtjEkMDwXh6zgHbJAXkggEjJDSOAVkxhNACDQIwFg7AnDkPwYQow2D4G4MYeQlhVBGGq04Ww84iAOFwJ8H4Fum1OG+H8IIcRfhyGGkQNgaAciiyVBGAzOAkxP6cLQRgvAWChF8IIeQ+hzChHsJMV4CRsj5GKPyIgSokxWYEHmNAQw1ZoD02dACJmkDGIwLQFo9BoBih6JwXg-hIxiEpHSEYyhIwaFqDoZQhh4T7K8LCYY8x8CJGiOctIyR-ihGWKMHIhRSi7GqOgIzBxlJDJZL8NlQweTdQ+OgcxNAO9IC5mQZwkg+JkHZWII6Ox0AdBWiImgZmFB3wGi6dAAJOiQmsPSUwyJpCYmmDiaodQxjDDcNSfo5ZgivB7MyVQAxAjTnZM0YUkRUibkbkEAfJurNc5J2Hv4Ue38CleEQcg1BgTgmNIOWYihphkkZKBcc-hRy6kTF5nPVOn8kS1LOeAJE+UtFILgP8hZkKlkgp2SCzhZjs7h0Ank96rz84L0KonalOS5BIhKogMEbx0WNUTFPJgm8Ol70xX8uA2igmYLxaiglSSjBEtMdCy5fgMhUveWjQqTza53y+I-Zgz83ixH5diwVAKRVpPFWCyVMrRVSosXK1kyL7lInlXSxV6MyDo2megIVxQd4vCLDAaQoURjrxrJHbk8zhW6I6bM2AnDWSrOie0pkEbOEZGtSiiRdq0BEzQCm+pOgxwTJAKpBEScdE6HdWJT1cAOy+v2IIRxBDGSuMqCMtAABWWUaAABsAAGNtABGTt-bmTkGAEAA

### Steps to Reproduce the Bug or Issue

Generate with codegen
Replace react-query by vue-query
Use options in a generated custom useQuery hook
Correct options object is considered invalid by typescript

### Expected behavior

query options like
{
staleTime: 60,
}
should be valid (typescript)

### Screenshots or Videos

_No response_

### Platform

- OS: [e.g. macOS, Windows, Linux]
- NodeJS: [e.g. 18.5.0]
- `graphql` version: [e.g. 16.3.0]
- `@graphql-codegen/*` version(s): [e.g. 2.6.2]

### Codegen Config File

plugins: ['typescript', 'typescript-operations', 'typescript-react-query'],
config: {
reactQueryVersion: 4,
useTypeImports: true,
addInfiniteQuery: true,
exposeDocument: true,
exposeQueryKeys: true,
exposeFetcher: true,
skipTypename: true,
maybeValue: 'T | undefined',
},

### Additional context

_No response_

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the TypeScript playground reproduction linked in the issue and compare the generated options type with vue-query's UseQueryOptions. The issue points to the typescript-react-query plugin and its generated custom useQuery hook; reproduce the reported invalid-options error, then verify that `{ staleTime: 60 }` is accepted when using vue-query.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, typescript
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.