URQL - Universal React Query Library (GraphQL Client)

Universal React Query Library (URQL) is a highly customizable GraphQL client, exposed as a set of React components by Formidable, aiming to become a lightweight alternative that would uphold the principal values of the GraphQL protocol & SDL.

Currently, the most popular client libraries come with large API footprints. URQL's main goal is to simplify some of the most popular aspects arising when using GraphQL by providing:

1. The Declarative Queries

URQL Client internally manages the lifetime and updates for query & mutation operations in the background:

• when a cache invalidates their results you may receive updated data,
• when your app stops being interested in results URQL will teardown the operation (it will stop requesting new data, stop updating results)

Source: Uql Docs

2. The abstracted caching

Caching is handled & customizable with so-called Exchanges. The default cacheExchange offers basic cache implementation that will avoid sending the same requests to a GraphQL API repeatedly by caching the result of each query. For more complex cases containing data interdependencies, URQL offers normalized caching provided by @urql/exchange-graphcache package.

3. The central point of extensibility and integration with GraphQL API

URQL provides Exchanges to abstract how the Client interacts with frameworks, GraphQL API, or your app. URQL's Exchanges have access to all operations and all results (the concept is very similar to middlewares in Redux). The core package's default behaviors are implemented using Exchanges as both operations as their results are treated as a stream of events:

Source: Uql Docs

Features

• Built to be easy to use - URQL prioritizes usability and adaptability aiming to be the first-choice pick for both, newcomers as well as GraphQL power-users,
• Performant and functional - Lightweight & powerful GraphQL client, easy to use with React, Preact, and Svelte, makes URQL a great alternative to other bulky GraphQL clients.
• Logical default behavior and caching - URQL enables you to use GraphQL in your apps out of the box without complex configurations, large API overhead, and all that fuss.
• Easily extensible - one of the most interesting concepts presented in URQL are Exchanges. They are a kind of middleware that will help you change how you fetch, cache, or subscribe to data.

Basic Usage

The method createClient creates the GraphQL client which requires providing API's URL as a bare minimum. This Client will manage all your operations. To make it work in React & Preact provide it via the Context API with the help of the Provider export.

import { createClient, Provider } from 'urql';
const client = createClient({
  url: 'http://localhost:3000/graphql',
});
const App = () => (
  <Provider value={client}>
    <YourRoutes />
  </Provider>
);

Source: Uql Docs

To get more details instructions & exmaples makes sure to visit official URQL documentation.

---

Speed up your GraphQL schema development

GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. Try GraphQL Editor for free!