@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 {
  name = '';
  email = '';
}

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

API

Networking definition

• Endpoints: GQLEndpoint

Data model

Data Type	Mutable	Schema	Description	Queryable
Object	✅	Entity, EntityMixin, GQLEntity	single unique object	✅
✅	Union(Entity)	polymorphic objects (A | B)	✅
🛑	Object	statically known keys	🛑
	Invalidate(Entity)	delete an entity	🛑
List	✅	Collection(Array)	growable lists	✅
🛑	Array	immutable lists	🛑
	All	list of all entities of a kind	✅
Map	✅	Collection(Values)	growable maps	✅
🛑	Values	immutable maps	🛑
any		Query(Queryable)	memoized custom transforms	✅