Features

• Typed queries and mutations, from your generated TypedDocumentNodes.
• A normalized cache, shared by every query.
• Suspense-first hooks: useQuery, useDeferredQuery, useMutation.
• Cursor pagination helpers for Relay-style connections.
• Server-side rendering with a cache handoff.
• Works with React DOM and React Native.

Installation

$ yarn add @zoontek/gql-client
# --- or ---
$ npm install --save @zoontek/gql-client

Quick start

Create a client and make it available to your app:

import { Client, ClientProvider } from "@zoontek/gql-client";
import schemaConfig from "./schemaConfig.json";

const client = new Client({
  url: "https://api.example.com/graphql",
  schemaConfig,
});

const Root = () => (
  <ClientProvider value={client}>
    <App />
  </ClientProvider>
);

Then query from any component:

import { useQuery } from "@zoontek/gql-client";
import { graphql } from "./gql";

const PostQuery = graphql(`
  query Post($postId: ID!) {
    post(id: $postId) {
      id
      title
      body
    }
  }
`);

const Post = ({ postId }: { postId: string }) => {
  const [{ data }] = useQuery(PostQuery, { postId });

  return data.post == null ? (
    <div>Post not found</div>
  ) : (
    <article>
      <h1>{data.post.title}</h1>
      <p>{data.post.body}</p>
    </article>
  );
};

The full setup (schema config generation, Suspense and error boundaries) is in the getting started guide.

Credits

This library is based on @bloodyowl/graphql-client.

Links

• 📕 Documentation
• ⚖️ License