Zeus can generate type-safe versions of Apollo Client's useQuery
, useMutation
, useSubscription
and useLazyQuery
React hooks as useTypedQuery
, useTypedMutation
etc... by adding the --apollo
flag to the CLI. All types in the data
response are then inherited from the Zeus query. 🚀
$ zeus schema.graphql ./ --apollo
# apollo.ts file with typed hooks is now in the output destination
useTypedQuery
Hook Exampleimport { useTypedQuery } from './zeus/apollo';
const Main = () => {
const { data } = useTypedQuery({
// Get autocomplete here:
drawCard: {
name: true,
},
});
// data response is now typed
return <div>{data.drawCard.name}</div>;
};
If you would like to infer the response type of your query for Apollo Client you can use the Zeus Selector
function and InputType
utility from the Zeus generated library
import { Selector, InputType, GraphQLTypes } from './zeus';
export const drawCardQuery = Selector('Card')({
drawCard: {
id: true,
name: true,
Attack: true,
Children: true,
},
});
type DrawCardResponseType = InputType<GraphQLTypes['Card'], typeof drawCardQuery>;
// DrawCardResponseType is now the response type from the query
Now drawCardQuery
can be reused directly in the typed Apollo Client useTypedQuery
later
import { useTypedQuery } from './zeus/apollo';
import { drawCardQuery } from './';
const Main = () => {
const { data } = useTypedQuery(drawCardQuery);
// data is of type DrawCardResponseType as per the above example
return <div>{data.drawCard.name}</div>;
};