Zeus can generate builders for , a type-safe query representation understood by most GraphQL clients (including Apollo, URQL etc) by adding the --typedDocumentNode or --td flag to the CLI.
Generate Type-Safe Zeus Schema And TypedDocumentNode query builders
$ zeus https://yourschema.com/graphql ./ --typedDocumentNode
# typedDocumentNode.ts file with typed document node builders is now in the output destination
TypedDocumentNode + Apollo Client useMutation examples
The following example demonstrates usage with Apollo. Other clients should work similarly.
import { typedGql } from './zeus/typedDocumentNode';
import { $ } from './zeus';
import { useMutation } from '@apollo/client';
const myMutation = typedGql('mutation')({
cardById: [{ cardId: $('cardId', 'String!') }, { name: true }],
});
const Main = () => {
const [mutate] = useMutation(myMutation);
// data response is typed
return (
<div
onClick={() => {
// this are typesafe vars
mutate({
variables: {
cardId: 'du1hn298u1eh',
},
});
}}
>
Click
</div>
);
};