Log in to GraphQL Editor
URQL - Universal React Query Library (GraphQL Client)
Tomek

Tomek Poniatowicz

8/11/2020

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)

URQL Declarative Queries Source: Urql 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:

URQL Extensibility provided by Exchanges Source: Urql 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: Urql Docs

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

Check out our other blogposts

Slash GraphQL - a fully managed GraphQL backend service
Michał Tyszkiewicz
Michał Tyszkiewicz
Slash GraphQL - a fully managed GraphQL backend service
4 min read
over 3 years ago
InQL Scanner - find security flaws in your GraphQL code
Jakub Chomko
Jakub Chomko
InQL Scanner - find security flaws in your GraphQL code
3 min read
about 4 years ago
Vue - introduction to Web Components
Michał Tyszkiewicz
Michał Tyszkiewicz
Vue - introduction to Web Components
5 min read
over 3 years ago

Ready for take-off?

Elevate your work with our editor that combines world-class visual graph, documentation and API console

Get Started with GraphQL Editor