Universal React Query Library is a GraphQL client, exposed as a set of ReactJS components.

View on Github


A highly customisable and versatile GraphQL client for React

Build Status Test Coverage NPM Version

Steve Urkel

✨ 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.


The documentation contains everything you need to know about urql

Quick Start Guide

First install urql and graphql:

yarn add urql graphql
# or
npm intall --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

  <Provider value={client}>
    <YourApp />

This allows you to now use the <Query> component to fetch data from your server:

import { Query } from 'urql';

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

Alternatively you can take advantage of the useQuery hook in your function component:

import { useQuery } from 'urql';

const YourComponent = () => {
  const [{ fetching, data }] = useQuery(`{ todos { id } }`);
  return fetching ? <Loading /> : <List data={data.todos} />;

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


There are currently two examples included in this repository: