@data-client/graphql

Data Client for GraphQL

GraphQL Endpoints for Data Client

📖Read The Docs  |  🎮Github Demo

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)} />;