typesafe wrappers for ApolloClient query, watchQuery, mutate

[twmillett]

The withHooks option on the apollo typescript is awesome because it ties together and makes typesafe the query, the variables, and the response object into a single, beautiful, function.

I've been poking around, but I don't see the ability to generate similar wrappers for use against the imperative query/watchQuery/mutate methods on the ApolloClient instance, itself.

In other words, assuming there's a query called GetDogs, have the tool genereate something like

export function clientQueryGetDogs<TClient>(
   client: ApolloClient<TClient>, 
   baseOptions?: Partial<QueryOptions<GetDogsVariables>>
) {
    return client.query<GetDogs, GetDogsVariables>({...baseOptions, query:GetDogsDocument});
}

Then, instead of having to do

import {
    GetDogsDocument,
    GetDogs,
    GetDogsVariables,
} from './__generated__/GetDogs.interface';

const result = client.query<GetDogs, GetDogsVariables>({query: GetDogsDocument, variables: {...}})

You could simply do

import { clientQueryGetDogs } from './__generated__/GetDogs.interface';

const result = clientQueryGetDogs({variables: {...}})

Thanks for making such an awesome tool!

[zenflow]

@twmillett I believe TypedDocumentNode solves the problem you're trying to solve (needing to import FooQuery and FooQueryVariables and use them as generics for query/mutate/watchQuery calls).

Only downside of that solution is that for now you need to install a beta version of Apollo Client.. 3.2.0-beta.2

[zenflow]

Subscribed to graphql-js issue 2727 & PR 2728... awesome 🚀

[twmillett]

Is this designed as an alternative to typescript-react-apollo? I notice that when both are configured in codegen.yml, you get duplicated document node definitions.

[dotansimha]

@twmillett We hope that in some point this will replace the need for the typescript-react-apollo, since the support will be in apollo-client (v3) and in graphql itself.

For now, we continue to support all our plugins ;)

[twmillett]

@dotansimha

I wasn't very clear in my last statement about the duplicated document nodes. I think it's the case, though, that you must pick either typed document node or typescript-react-apollo in your codegen. Otherwise, I'm getting

// this is generated by typescript-react-apollo
export const GetDogsDocument = DocumentNode = {"{kind: ..."

// this is generated by typesafe node
export const GetDogsDocument: DocumentNode<GetDogsMutation, GetDogsMutationVariables> = {"kind": ...

and then a compile error for having redefined GetDogsDocument. I think it makes sense, though, that you don't really need both (?)

[dotansimha]

Yeah, you don't need both :) You can use just TypedDocumentNode.

[Sid-Turner-Ellis]

I wanted to keep my hooks so I ended up removing the apollo react plugin and writing a simple one that uses what the typed document node gives us:

const gqlTag = "import { useQuery, useMutation, QueryHookOptions, MutationHookOptions } from '@apollo/client';";

function generateHook(type, operationName) {
  if (type === 'query') {
    return `export const use${operationName}Query = (options?: QueryHookOptions<${operationName}Query, ${operationName}QueryVariables>) => {
  return useQuery<${operationName}Query, ${operationName}QueryVariables>(${operationName}Document, options);
};`;
  } else if (type === 'mutation') {
    return `export const use${operationName}Mutation = (options?: MutationHookOptions<${operationName}Mutation, ${operationName}MutationVariables>) => {
  return useMutation<${operationName}Mutation, ${operationName}MutationVariables>(${operationName}Document, options);
};`;
  }
  return '';
}

module.exports = {
  plugin: (schema, documents, config) => {
    const hooks = documents.flatMap(({ document }) => {
      const operations = document.definitions
        .filter((def) => def.kind === 'OperationDefinition')
        .map((operation) => ({
          type: operation.operation,
          operationName: operation.name.value,
        }));

      return operations.map(({ type, operationName }) => generateHook(type, operationName));
    });

    return [gqlTag, ...hooks].join('\n\n');
  },
};

with the codegen file being:

overwrite: true
schema: 'http://localhost:3000/graphql'
documents: ['src/**/*.tsx', 'src/**/*.ts']
generates:
  src/graphql/graphql.tsx:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'fragment-matcher'
      - 'typed-document-node'
      - ./codegen-plugin-just-hooks.js
    config:
      dedupeOperationSuffix: false
      withHooks: true
      preResolveTypes: true
      declarationKind: 'type'
  src/graphql/graphql.schema.json:
    plugins:
      - 'introspection'

[ThePatriczek]

I added new Apollo hooks e.g. useSuspenseQuery, useBackgroundQuery, useFragment, to the script below

const apolloImport = "import * as Apollo from '@apollo/client';";

function generateOperationHook(type, name) {
    const operationName = name.charAt(0).toUpperCase() + name.slice(1);
    if (type === 'query') {
        return `export const use${operationName}Query = (options?: Apollo.QueryHookOptions<${operationName}Query, ${operationName}QueryVariables>) => {
  return Apollo.useQuery<${operationName}Query, ${operationName}QueryVariables>(${operationName}Document, options);
};
export const use${operationName}LazyQuery = (options?: Apollo.LazyQueryHookOptions<${operationName}Query, ${operationName}QueryVariables>) => {
  return Apollo.useLazyQuery(${operationName}Document, options);
};

export const use${operationName}SuspenseQuery = (options?: Apollo.SuspenseQueryHookOptions<${operationName}Query, ${operationName}QueryVariables>) => {
  return Apollo.useSuspenseQuery(${operationName}Document, options);
};

export const use${operationName}BackgroundQuery = (options?: Apollo.BackgroundQueryHookOptions<${operationName}Query, ${operationName}QueryVariables>) => {
  return Apollo.useBackgroundQuery(${operationName}Document, options);
};
`;
    } else if (type === 'mutation') {
        return `export const use${operationName}Mutation = (options?: Apollo.MutationHookOptions<${operationName}Mutation, ${operationName}MutationVariables>) => {
  return Apollo.useMutation(${operationName}Document, options);
};`;
    } else if (type === 'subscription') {
        return `export const use${operationName}Subscription = (options?: Apollo.SubscriptionHookOptions<${operationName}Subscription, ${operationName}SubscriptionVariables>) => {
  return Apollo.useSubscription(${operationName}Document, options);
};`;
    }

    return '';
}

function generateFragmentHook(name, fragmentName) {
    return `export const use${fragmentName}Fragment = (options:  { from: Apollo.StoreObject | Apollo.Reference } & Omit<Partial<Apollo.UseFragmentOptions<${fragmentName}Fragment, Apollo.OperationVariables>>, 'from'>) => {
  return Apollo.useFragment<${fragmentName}Fragment>({
    fragment: ${fragmentName}FragmentDoc,
    fragmentName: "${fragmentName}",
    ...options,
        from: {
        __typename: "${name}",
        ...options.from
    },
});
}`;
}

module.exports = {
    plugin: (schema, documents, config) => {
        const hooks = documents.flatMap(({ document }) => {
            const operations = document.definitions
                .filter((def) => def.kind === 'OperationDefinition')
                .map((operation) => ({
                    type: operation.operation,
                    operationName: operation.name.value,
                }));
            const fragments = document.definitions
                .filter((def) => def.kind === 'FragmentDefinition')
                .map((fragment) => ({
                    name: fragment.typeCondition.name.value,
                    fragmentName: fragment.name.value,
                }));
            const solvedOperations = operations.map(({ type, operationName }) =>
                generateOperationHook(type, operationName)
            );
            const solvedFragments = fragments.map(({ name, fragmentName }) => generateFragmentHook(name, fragmentName));
            return [...solvedOperations, ...solvedFragments];
        });

        if (hooks.length) {
            return [apolloImport, ...hooks].join('\n\n');
        }
    },
};