React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

Urql promises to simplify using GraphQL in React

React continues to dominate the JavaScript scene. The Facebook library is now used at Microsoft, Apple and virtually every start up out there. Another force to recon with is GraphQL, something that looks to dominate REST going into 2018. Urql is a new library to ease working with the stack.

GraphQL is a communications protocol that comes with a complete specification. To realise this there are server and client implementations. For server implementations there is the reference implementation for JavaScript, and a solid selection for other popular server side languages like Java, Python and PHP.

For client side there are two prominent libraries: Relay and Apollo. Both of these are feature complete, but are very generic and thus have some overhead in use. This makes picking up and implementing GraphQL a non-trivial task that can be intimidating.

This is where Urql comes in. The name is somewhat cumbersome, but comes from "Universal React Query Library". It aims to make using GraphQL on the client very easy. This opinionated library enables developers to get up and running with GraphQL driven apps in no time. Unlike Relay and Apollo the architecture of Urql is only targeting React.js - the ubiquitous UI library in 2018.

Opinionated GraphQL library for React

Without the opinions and boilerplate needed for integrating GraphQL to rich React and React Native applications, developers can yield results in a rapid fashion. This philosophy does not cut down on features, as the library comes with complete with Queries, Mutations and solid caching capabilities.

The best way to get started is by looking at the basic implementation of Urql in a React component:

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider, Client } from 'urql';
import Home from './home';

const client = new Client({
  url: 'http://localhost:3001/graphql',

export const App = () => (
  <Provider client={client}>
    <Home />

ReactDOM.render(<App />, document.getElementById('root'));

The caching strategy Urql takes takes a unique approach, something tailored specifically to React.js developers. It simply takes the query and generates a hash to store your query results in the local cache.

Automatic invalidation will be performed if a mutation is done to any query that resides in local cache. For React devs the magic somes in the form of a shouldInvalidate prop that allows controlling the cache as shown in the snippet below:

const MyComponent = () => (
    shouldInvalidate={(changedTypenames, typenames, mutationResponse, data) => {
      return data.todos.some(d => ===;
    render={({ loaded, fetching, refetch, data, error, addTodo }) => {
      //...Your Component

A Universal GraphQL solution in Beta

As universal JavaScript frameworks of all kind become the norm, the library is also able to run on the server with Node.js. This opens up interesting use cases for decoupling with frameworks with Next.js together with GraphQL with WordPress, for example.

Integrating Next.js with Urql making for a solid stack that is easy to reason about. In a technical background it's worth noting that the library is written in TypeScript, another growing technology in the JavaScript community. TypeScript seems to be especially popular with library developers and integrates with GraphQL types as well.

Urql is currently in beta stage and will continue to evolve, so it might not be the most robust choice for enterprise grade React.js development projects at this time. However, for smaller side projects and commercial work with low complexity it is certainly worth a look. 

Get started today by installing Urql from NPM or checking out the GitHub repo: Urql - Universal React Query Library

Written by Jorgé on Wednesday January 31, 2018

Permalink - Tags: graphql, react

« Linux Kernel 4.15 patches Meltdown and Spectre v2 - Peachpie online REPL transpiles PHP to C# on the fly »