Graphql-code-generator: `withRefetchFn` depends on ApolloReactHoc.withQuery which is not exported in Apollo 3

[aldegoeij]

Describe the bug
graphql-code-generator generates correct functions for use with refetchQueries, however when using it in a React Native app I get a TypeError: ApolloReactHoc.withQuery is not a function when on Apollo 3 (beta)

I did some digging and looks like apollo 3 deprecates @apollo/react-hoc functionality (which is a apollo 2 compatible lib)

Looking for help to figure out how to get this to work on apollo 3 if it is not graphql-code-generator related.

Stacktrace:

TypeError: ApolloReactHoc.withQuery is not a function. (In 'ApolloReactHoc.withQuery(ListMyThingsDocument, _objectSpread({
      alias: 'listMyThings'
    }, operationOptions))', 'ApolloReactHoc.withQuery' is undefined)

withListMyThings
    components.tsx:538:11
self.getObservableFromLink.subscribe$argument_0.complete
    apollo-client.cjs.js:2496:75
notifySubscription
    Observable.js:145:15
onNotify
    Observable.js:179:20
complete
    Observable.js:245:14
forEach
    [native code]:0
iterateObserversSafely
    apollo-client.cjs.js:585:4
_this.handlers.complete
    apollo-client.cjs.js:2082:46
notifySubscription
    Observable.js:145:15
onNotify
    Observable.js:179:20
complete
    Observable.js:245:14
fetcher.then.then.then$argument_0
    apollo-client.cjs.js:1269:16
tryCallOne
    core.js:37:13
setImmediate$argument_0
    core.js:123:24
_callTimer
    JSTimers.js:135:14
_callImmediatesPass
    JSTimers.js:183:16
callImmediates
    JSTimers.js:446:30
callImmediates
    [native code]:0
__callImmediates
    MessageQueue.js:396:6
__guard$argument_0
    MessageQueue.js:144:6
__guard
    MessageQueue.js:373:10
flushedQueue
    MessageQueue.js:143:4
flushedQueue
    [native code]:0
invokeCallbackAndReturnFlushedQueue
    [native code]:0

To Reproduce
Steps to reproduce the behavior:

Using any generated tsx components file with plugin typescript-react-apollo and withRefetchFn: true

// generated components.tsx
import gql from 'graphql-tag';
import * as React from 'react';
import * as ApolloReactCommon from '@apollo/client';
import * as ApolloReactComponents from '@apollo/client';
import * as ApolloReactHoc from '@apollo/client';
import * as ApolloReactHooks from '@apollo/client';

// ...

// Some mutation function
export function useCreateThingMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<CreateThingMutation, CreateThingMutationVariables>) {
        return ApolloReactHooks.useMutation<CreateThingMutation, CreateThingMutationVariables>(CreateThingDocument, baseOptions);
      }

//...

// The refetch function
export function withListMyThings<TProps, TChildProps = {}, TDataName extends string = 'data'>(operationOptions?: ApolloReactHoc.OperationOption<
  TProps,
  ListMyThingsQuery,
  ListMyThingsQueryVariables,
  ListMyThingsProps<TChildProps, TDataName>>) {
    return ApolloReactHoc.withQuery<TProps, ListMyThingsQuery, ListMyThingsQueryVariables, ListMyThingsProps<TChildProps, TDataName>>(ListMyThingsDocument, {
      alias: 'listMyThings',
      ...operationOptions
    });
};

// app.js
const [createThing, { loading, data, error }] = useCreateThingMutation({
  variables: { input: { title: "Thing 1" } },
  refetchQueries: withListMyThings,
});

// Some trigger, click, button, etc
createThing();

On triggering of createThing() the mutation completes succesfully, but the refetch throws above error.

1. My GraphQL schema:

2. My GraphQL operations:

3. My codegen.yml config file:

overwrite: true
schema: ./src/graphql/**/*.schema.graphql
generates:
  ./src/graphql/types/resolvers.ts:
    documents: null
    plugins:
      - typescript
      - typescript-resolvers
    config:
      defaultMapper: Partial<{T}>
      useIndexSignature: true
  ./src/graphql/client/types.ts:
    documents: ./src/graphql/**/*.operation.graphql
    plugins:
      - typescript
      - typescript-operations
      - typescript-document-nodes
    config:
      nameSuffix: "Document"
  ./src/graphql/client/components.tsx:
    documents: ./src/graphql/**/*.operation.graphql
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      reactApolloVersion: 3
      withHooks: true
      withRefetchFn: true

Expected behavior
Expect refetch function to work as the query itself (in non-refetch fashion) works like a charm. The generated file is clearly referencing a function that is no longer exposed in Apollo 3 (or included.

Environment:

• OS: macOS
• @apollo/client:
• NodeJS: 14

[aldegoeij]

After digging into more typescript ~hell~ heaven, turns out a quick ~fix~ workaround without using withListMyThings is:

const [createThing, { loading, data, error }] = useCreateThingMutation({
  variables: { input: { title: "Thing 1" } },

  // workaround...
  refetchQueries: [{ query: ListMyThingsDocument }]
  // end workaround

});

Is there any reason to use withListMyThings refetch function over the above which is essentially a PureQueryOptions type as exported from Apollo?

[dotansimha]

Thanks @aldegoeij !
We are trying to match the actual exported identifiers and tools from Apollo client v3, it's still in beta so it's not perfect.

@ardatan can you please take a look?

[lionkeng]

Firstly, thank you for the tool! Love it. I am also using Apollo Client v3 which is currently at rc9. I use graphql-codegen to generate hooks only, and it works great but I have to manually change these 2 lines in the generated code.

FROM:

import * as ApolloReactCommon from '@apollo/react-common';
import * as ApolloReactHooks from '@apollo/react-hooks';

TO:

import * as ApolloClient from '@apollo/client';

In the generated code, I then need to update all references of ApolloReactCommon and ApolloReactHooks to ApolloClient. v3 of Apollo Client is packaged with all batteries included. So those 2 packages in the generated code are no longer required.

[ardatan]

https://graphql-code-generator.com/docs/plugins/typescript-react-apollo
You can change all the imports using those options. You can find more information in the documentation if you read.

apolloReactCommonImportFrom
type: string default: "

apolloReactHooksImportFrom
type: string default: "

[dotansimha]

I fixed it in https://github.com/dotansimha/graphql-code-generator/pull/4487 , also v3 of Apollo-Client and Hooks should be generated by default now. can you please try the alpha version? it's 1.17.8-alpha-f79b3113.0

[dotansimha]

Available in @graphql-codegen/[email protected] 🎉