Can typescript-react-apollo generate TypedDocumentNode?

[alexeyr-ci]

If I set documentMode: DocumentMode.documentNode, I get

export const XXXDocument = {...} as unknown as DocumentNode;

But it knows what TData and TVariable should be, since they are used in useXXXQuery. If I could get it to generate

export const XXXDocument = {...} as unknown as TypedDocumentNode<XXXQuery, XXXQueryVariables>;

I could slowly switch from typescript-react-apollo's style of hooks to using typed useQuery/useMutation.

I tried using typed-document-node and typescript-react-apollo together, but then they both try to define const XXXDocument.

[alexeyr-ci]

What I ended up doing is using both plugins together, and adding a post-processing hook:

const removeUntypedDocument = (path: string) => {
  const contents = fs.readFileSync(path, 'utf8');
  const newContents = contents.replace(
    // This regex detects the gql tag without a cast to TypedDocumentNode at the end.
    /export const \w*(Document|Doc) = (\/\*#__PURE__\*\/ )?gql`[^`]*`;\n?/mg,
    '',
  );
  fs.writeFileSync(path, newContents);
};

and

      hooks: {
        afterOneFileWrite: removeUntypedDocument,
      },

[dotansimha]

TypedDocumentNode is a more modern, TS-friendly alternative to the approach of generating code/function per GraphQL operation.
We recommend using client preset for modern applications - it simplifies the setup and enforces better practices (based on TypedDocumentNode)

[alexeyr-ci]

I understand. The problem is, we have a large existing application using typescript-react-apollo. When I tried to introduce TypedDocumentNode on its own, it was a large PR which didn't get accepted. And I wasn't able to get client-preset to work for our application at all.

[Urigo]

@alexeyr-ci can you share more details about the migration?
We would love to make migrating to client-preset easier