explaingit

urql-graphql/urql

8,945TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A lightweight JavaScript library for connecting React, Vue, Svelte, and other front-end frameworks to a GraphQL API, with built-in caching and a flexible plugin system called exchanges.

Mindmap

mindmap
  root((urql))
    What it does
      GraphQL requests
      Result caching
      UI data delivery
    Framework support
      React and Preact
      Vue and Solid
      Svelte
    Customization
      Exchange pipeline
      Auth headers
      Retry logic
    Audience
      Front-end developers
      GraphQL users
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Connect a React app to a GraphQL API and automatically cache query results so repeated requests skip the network call.

USE CASE 2

Add authentication headers to every GraphQL request in a Vue or Svelte app by writing a custom exchange plugin.

USE CASE 3

Inspect and debug GraphQL traffic in the browser using the urql developer tools browser extension.

Tech stack

TypeScriptJavaScriptReactVueSvelteSolidPreact

Getting it running

Difficulty · easy Time to first run · 30min

In plain English

urql is a JavaScript library for connecting front-end applications to a GraphQL API. GraphQL is a way for a web app to request exactly the data it needs from a server, rather than getting a fixed response format. urql handles the mechanics of sending those requests, caching the results, and delivering the data to your components. The library works with several popular JavaScript frameworks out of a single package: React, Preact, Vue, Solid, and Svelte are all supported. Out of the box it uses a straightforward document cache, meaning it stores results for queries you have already run and skips the network call if the same query is made again. For applications with more complex data requirements, an optional add-on called Graphcache provides normalized caching, which keeps a more structured local copy of your data and can automatically update related parts of the UI when something changes. Customization in urql is done through a concept called exchanges. Exchanges are small units of logic that sit in the request pipeline, and you can add, remove, or replace them to change how the client behaves. This makes it possible to add things like authentication headers, retry logic, or custom caching strategies without modifying the core library. The project was founded by Formidable and is now maintained by its own open-source team. Documentation is organized into sections for beginners through to advanced users, and a browser extension is available to help inspect and debug GraphQL traffic from within developer tools. The readme for this repository is short and mostly points to the external documentation site.

Copy-paste prompts

Prompt 1
I'm building a React app that fetches data from a GraphQL API. Show me how to set up urql, write my first query, and display the results in a component.
Prompt 2
I need to add an authorization header to every GraphQL request in my urql setup. Show me how to create a custom auth exchange.
Prompt 3
My urql app is making duplicate network requests for the same query. How do I configure the cache or switch to Graphcache to prevent redundant fetches?
Prompt 4
I'm using urql with Vue 3. Show me how to install it, set up the client, and use a query composable in a single-file component.
Open on GitHub → Explain another repo

← urql-graphql on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.