Generate React Apollo Hooks with the ApolloClient instance

[estyxx]

When using graphql-code-generator with Next.js and getStaticProps, we have to use ApolloClient to run the queries, like this:

export const getStaticProps = async () => {

  const { data } = await client.query<PageQuery>({
    query: PageDocument,
    variables: {
      siteId: process.env.NEXT_API_SITE_ID,
      urlPath,
    },
  });
  
  ...
}

It would be nice to have a hook generated that injects the client in order to have a cleaner code and avoid importing the document. So the example will become something like this:

export const getStaticProps = async () => {
  
  const { data } = await usePageQuery(client, {
    siteId: process.env.NEXT_API_SITE_ID,
    urlPath,
  });
  
  ...
}

Atm, I'm using a custom plugin to generate additional hooks, but it would be nice to have some opinion on this; maybe it could have been done in a better way... If there's no way to do it yet, it would be a nice feature to include I think :)

Note: in these examples, I need the hooks only in the server-side generated queries, so I didn't put withHooks option, but I have other projects in which I using both... In those cases, I would need to include the plugins 'typescript', 'typescript-operations', 'typescript-react-apollo' (and not using client-preset) and name the queries with the ApolloClient differently... (I don't know how to generate a useQuery hook with the optional apollo client)

Here there is my custom plugin:

// codegen-apollo-client-query.ts
// @ts-ignore
module.exports = {
  plugin: (schema, documents, config) => {
    let definitionsCode = [];

    for (const doc of documents) {
      definitionsCode = definitionsCode.concat(
        doc.document.definitions
          .filter((definition) => definition.operation === "query")
          .map((definition) => writeApolloClientQuery(definition)),
      );
    }

    return definitionsCode.join("");
  },
};

const writeApolloClientQuery = (definition) => {
  const definitionName = definition.name.value;
  const codeFriendlyName = `${definitionName[0].toUpperCase()}${definitionName.slice(
    1,
  )}`;

  return `
export async function use${codeFriendlyName}Query(client: ApolloClient<any>, variables?: ${definitionName}QueryVariables): Promise<ApolloQueryResult<${definitionName}Query>> {
  // @ts-ignore
  return client.query({
    query: ${definitionName}Document,
    variables,
  });
}

`;
};

And in codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
    overwrite: true,
    schema: process.env.NEXT_API_BUILD_SCHEMA_ENDPOINT,
    documents: 'src/apollo/**/*.graphql',
    generates: {
        'src/apollo/types/': {
            preset: 'client',
            plugins: [
                {
                    add: { content: 'import { ApolloClient, ApolloQueryResult } from "@apollo/client/core";' },
                },
                'codegen-apollo-client-query.ts',
            ],
        },
    },
};

export default config;

Hope is clear what I mean :)