Rest Hooks for GraphQL
GraphQL Endpoints for Rest Hooks
Define GraphQL endpoint
const gql = new GQLEndpoint('https://nosy-baritone.glitch.me');
Simple TypeScript definition
class User extends GQLEntity {
readonly name: string = '';
readonly email: string = '';
}
Write type-safe queries
const userList = gql.query(
`{
users {
id
name
email
}
}`,
{ users: [User] },
);
const userDetail = gql.query(
`query UserDetail($name: String!) {
user(name: $name) {
id
name
email
}
}`,
{ user: User },
);
One line data-hookup
const { user } = useSuspense(userDetail, { name: 'Fong' });
return (
<>
<h2>{user.name}</h2>
<p>{user.email}</p>
</>
);
Mutations
const gql = new GQLEndpoint('https://graphql.org/swapi-graphql');
const createReview = gql.mutation(
`mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
createReview(episode: $ep, review: $review) {
stars
commentary
}
}`,
{ createReview: Review },
);
const controller = useController();
const createReview = useFetcher(createReview);
return <ReviewForm onSubmit={data => controller.fetch(createReview, data)} />;