npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

urql

1.4.0 • Public • Published
urql

A highly customisable and versatile GraphQL client for React

NPM Version Test Coverage Minified gzip size Maintenance Status Spectrum badge

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

📦 Add on Exchanges

urql can be extended by adding "Exchanges" to it, which you can read more about in our docs! Here's just a couple of them.

You can find the full list of exchanges in the docs.

💡 Examples

There are currently three 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.

install

npm i urql

Downloadsweekly downloads

4,423

version

1.4.0

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability