Skip to main content

Getting started

GraphQL Client is a simple GraphQL client for React applications. It's focused on giving a good, typesafe experience when working on your codebase.

1. Install​

$ yarn add @swan-io/graphql-client

or

$ npm install @swan-io/graphql-client

2. Generate the schema config​

The schema config is necessary for the cache to understand when your spread an interface type (e.g. on ... Node { id }). Don't worry, this ends up being really light and wont't affect your bundle size much.

$ generate-schema-config path/to/schema.gql dist/schema-config.json

3. Create your client​

Configure your client with your url, desired default headers & the schemaConfig you just generateed.

src/index.tsx
import { Client, ClientContext } from "@swan-io/graphql-client";
import { App } from "./App";
import { createRoot } from "react-dom/client";
import schemaConfig from "./dist/schema-config.json"

const client = new Client({
  url: "/api",
  headers: {
    "Content-Type": "application/json",
  },
  schemaConfig,
});

export const Root = () => {
  return (
    <ClientContext.Provider value={client}>
      <App />
    </ClientContext.Provider>
  );
};

const root = document.querySelector("#app");

if (root != null) {
  createRoot(root).render(<Root />);
}

We recommend to install @graphql-eslint and activate the @graphql-eslint/require-id-when-available rule, as the cache heavily relies on id being queried.

And you're ready to go!