Skip to content
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

useBackgroundQuery and useReadQuery support (typescript-react-apollo) #477

Open
fforres opened this issue Oct 31, 2023 · 5 comments
Open
Assignees

Comments

@fforres
Copy link

fforres commented Oct 31, 2023

Is your feature request related to a problem? Please describe.

Add support for useBackgroundQuery and useReadQuery released in apollo-client 3.8

Describe the solution you'd like

Allow typescript-react-apollo to generate useBackgroundQuery and useReadQuery hooks with the current withHooks: true option

Describe alternatives you've considered

Additional context

@fforres
Copy link
Author

fforres commented Oct 31, 2023

Happy to work on the PR for this, though it might take me a bit 🙏

@saihaj
Copy link
Collaborator

saihaj commented Nov 1, 2023

great let me know once you are ready for review @fforres assigned you this issue. Thank you

@nirus
Copy link

nirus commented Nov 10, 2023

@fforres

Will keep the WIP here -> https://github.com/dotansimha/graphql-code-generator-community/compare/main...fforres:graphql-code-generator-community:fforres/use_background_query?expand=1

I corrected your generator code and it works.

      // BackgroundQuery Hook
      const backgroundOperationName: string =
        this.convertName(nodeName, {
          suffix: pascalCase('BackgroundQuery'),
          useTypesPrefix: false,
        }) + this.config.hooksSuffix;

      hookFns.push(
        `export function use${backgroundOperationName}(baseOptions?: ${this.getApolloReactHooksIdentifier()}.BackgroundQueryHookOptions<${operationResultType}, ${operationVariablesTypes}>) {
             const options = {...defaultOptions, ...baseOptions}
             return ${this.getApolloReactHooksIdentifier()}.useBackgroundQuery<${operationResultType}, ${operationVariablesTypes}>(${this.getDocumentNodeVariable(
          node,
          documentVariableName,
        )}, options);
           }`,
      );
      hookResults.push(
        `export type ${backgroundOperationName}HookResult = ReturnType<typeof use${backgroundOperationName}>;`,
      );

      // ReadQuery Hook
      const readOperationName: string =
        this.convertName(nodeName, {
          suffix: pascalCase('ReadQuery'),
          useTypesPrefix: false,
        }) + this.config.hooksSuffix;

      hookFns.push(
        `export function use${readOperationName}(backgroundQueryRef: ${this.getApolloReactHooksIdentifier()}.QueryReference<${operationResultType}>) {
          return ${this.getApolloReactHooksIdentifier()}.useReadQuery<${operationResultType}>(backgroundQueryRef);
        }`,
      );

      hookResults.push(
        `export type ${readOperationName}HookResult = ReturnType<typeof use${readOperationName}>;`,
      );

draftcode added a commit to draftcode/graphql-code-generator-community that referenced this issue Aug 7, 2024
…ableQuery

Implement `useBackgroundQuery` and `useLoadableQuery` hooks for React
Apollo. These APIs are added in 3.8.0 and 3.9.0 respectively.

Suspense support in Apollo Client provides 5 new hooks as described in
https://www.apollographql.com/docs/react/data/suspense/.
`useSuspenseQuery` support was added in
dotansimha#434.
Among other 4 hooks, `useBackgroundQuery` and `useLoadableQuery` are
the ones that take a GraphQL document as an argument like other existing
hooks. The support for these hooks are added in this change.

Other hooks, `useQueryRefHanders` and `useReadQuery` do not take a
GraphQL document as an argument, so they do not need to be added as the
generated code. Both take the return values of other hooks as an
argument, and the types are inferred from it.

Follow up to
dotansimha#388.
Fixes dotansimha#477.
@draftcode
Copy link

Since this issue has been stale, I've created a PR for this.

#815

@saihaj Do you mind reviewing the PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants