Skip to content
A highly customizable and versatile GraphQL client for React
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs (docs) - correct invalid syntax in getting started (#336) Jul 9, 2019
examples (fix) - make all components in examples have displayNames in devtools ( Jul 21, 2019
scripts Fix IE11 support and duplicate helpers by adding new Rollup config (#274 Jun 8, 2019
src Fix bounds checking of HTTP status codes in fetchExchange (#348) Jul 21, 2019
.codecov.yml Fix IE11 support and duplicate helpers by adding new Rollup config (#274 Jun 8, 2019
.editorconfig Refactor fetch to support cancellation again Jan 9, 2019
.eslintignore Migrate to typescript-eslint (#239) May 23, 2019
.eslintrc.json Ensure that state changes are applied immediately on mount (#256) Jun 5, 2019
.gitignore Switch to .npmignore whitelist to control everything. Feb 15, 2019
.npmignore Refine npmignore more Feb 15, 2019
.prettierignore [WIP] V1: Refactor the client's operation management (#168) Feb 1, 2019
.sail.yml Fix check task on CI Jun 19, 2019
CHANGELOG.md Update CHANGELOG for 1.1.3 Jun 18, 2019
CODE_OF_CONDUCT.md [WIP] V1: Refactor the client's operation management (#168) Feb 1, 2019
CONTRIBUTING.md Migrate to typescript-eslint (#239) May 23, 2019
LICENSE [WIP] V1: Refactor the client's operation management (#168) Feb 1, 2019
README.md Fix IE11 support and duplicate helpers by adding new Rollup config (#274 Jun 8, 2019
package.json v1.1.3 Jun 18, 2019
rollup.config.js Move all build tasks to Rollup (#306) Jun 18, 2019
tsconfig.json Revert to bundle based publish and fix source maps Feb 14, 2019
yarn.lock (tests) - coverage (#294) Jun 11, 2019

README.md

urql

A highly customisable and versatile GraphQL client for React

NPM Version Test Coverage Minified gzip size Maintenance Status

Features

  • 📦 One package to get a working GraphQL client in React
  • ⚙️ Fully customisable behaviour via "exchanges"
  • 🗂 Logical but simple default behaviour and document caching
  • ⚛️ Minimal React components and hooks

urql is a GraphQL client that exposes a set of React components and hooks. It's built to be highly customisable and versatile so you can take it from getting started with your first GraphQL project all the way to building complex apps and experimenting with GraphQL clients.

While GraphQL is an elegant protocol and schema language, client libraries today typically come with large API footprints. We aim to create something more lightweight instead.

Documentation

The documentation contains everything you need to know about urql

You can find the raw markdown files inside this repository's docs folder.

Quick Start Guide

First install urql and graphql:

yarn add urql graphql
# or
npm install --save urql graphql

Create a client for your endpoint url and wrap your app with a <Provider> component which urql exposes:

import { Provider, createClient } from 'urql';

const client = createClient({
  url: 'http://localhost:1234/graphql', // Your GraphQL endpoint here
});

ReactDOM.render(
  <Provider value={client}>
    <YourApp />
  </Provider>,
  document.body
);

This allows you to use the useQuery hook in your function component to fetch data from your server:

import { useQuery } from 'urql';

const YourComponent = () => {
  const [result] = useQuery({
    query: `{ todos { id } }`,
  });

  const { fetching, data } = result;
  return fetching ? <Loading /> : <List data={data.todos} />;
};

Alternatively you can take advantage of the <Query> component:

import { Query } from 'urql';

<Query query="{ todos { id } }">
  {({ fetching, data }) =>
    fetching ? <Loading /> : <List data={data.todos} />
  }
</Query>;

Learn the full API in the "Getting Started" docs!

Examples

There are currently two examples included in this repository:

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.

You can’t perform that action at this time.