`useBackgroundQuery` and `useReadQuery` support (typescript-react-apollo)

[fforres]

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]

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

[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

[saihaj]

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

[nirus]

@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]

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

https://github.com/dotansimha/graphql-code-generator-community/pull/815

@saihaj Do you mind reviewing the PR?

[JCown]

Any updates on this? There is a PR ready for review. This would be very handy 🙏