urql-graphql / urql

<div align="center"> <img alt="urql" width="250" src="packages/site/src/assets/sidebar-badge.svg" /> <br /> <br /> <strong> A highly customisable and versatile GraphQL client </strong> <br /> <br /> <a href="https://github.com/urql-graphql/urql/actions/workflows/ci.yml"> <img alt="CI Status" src="https://github.com/urql-graphql/urql/actions/workflows/ci.yml/badge.svg?branch=main" /> </a> <a href="https://www.npmjs.com/package/@urql/core"> <img alt="Weekly downloads" src="https://badgen.net/npm/dw/@urql/core?color=blue" /> </a> <a href="https://urql.dev/discord"> <img alt="Discord" src="https://img.shields.io/discord/1082378892523864074?color=7389D8&label&logo=discord&logoColor=ffffff" /> </a> <br /> <br /> </div>

✨ Features

• 📦 One package to get a working GraphQL client in React, Preact, Vue, Solid and Svelte
• ⚙️ Fully customisable behaviour via "exchanges"
• 🗂 Logical but simple default behaviour and document caching
• 🌱 Normalized caching via @urql/exchange-graphcache
• 🔬 Easy debugging with the urql devtools browser extensions

urql is a GraphQL client that exposes a set of helpers for several frameworks. 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.

📃 For more information, check out the docs.

💙 Sponsors

<table> <tr> <td align="center"><a href="https://bigcommerce.com/"><img src="https://avatars.githubusercontent.com/u/186342?s=200&v=4" width="150" alt="BigCommerce"/><br />BigCommerce</a></td> <td align="center"><a href="https://wundergraph.com/"><img src="https://avatars.githubusercontent.com/u/64281914?s=200&v=4" width="150" alt="WunderGraph"/><br />WunderGraph</a></td> <td align="center"><a href="https://the-guild.dev/"><img src="https://avatars.githubusercontent.com/u/42573040?s=200&v=4" width="150" alt="The Guild "/><br />The Guild</a></td> </tr> </table> <table> <tr> <td align="center"><a href="https://beatgig.com/"><img src="https://avatars.githubusercontent.com/u/51333382?s=200&v=4" width="100" alt="BeatGig"/><br />BeatGig</a></td> </tr> </table>

🙌 Contributing

The urql project was founded by Formidable and is actively developed by the urql GraphQL team.

If you'd like to get involved, check out our Contributor's guide.

📦 Releases

All new releases and updates are listed on GitHub with full changelogs. Each package in this repository further contains an independent CHANGELOG.md file with the historical changelog, for instance, here’s @urql/core’s changelog.

If you’re upgrading to v4, check out our migration guide, posted as an issue.

New releases are prepared using changesets, which are changelog entries added to each PR, and we have “Version Packages” PRs that once merged will release new versions of urql packages. You can use @canary releases from npm if you’d like to get a preview of the merged changes.

📃 Documentation

The documentation contains everything you need to know about urql, and contains several sections in order of importance when you first get started:

• Basics — contains the "Getting Started" guide and all you need to know when first using urql.
• Architecture — explains how urql functions and is built.
• Advanced — covers more uncommon use-cases and things you don't immediately need when getting started.
• Graphcache — documents "Normalized Caching" support which enables more complex apps and use-cases.
• API — the API documentation for each individual package.

Furthermore, all APIs and packages are self-documented using TSDocs. If you’re using a language server for TypeScript, the documentation for each API should pop up in your editor when hovering urql’s code and APIs.

You can find the raw markdown files inside this repository's docs folder.

<img width="100%" src="docs/assets/urql-spoiler.png" />