# @urql/preact

> A highly customizable and versatile GraphQL client for Preact

Latest version **5.0.0** (published 2025-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @urql/preact
pnpm add @urql/preact
yarn add @urql/preact
bun add @urql/preact
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2025-08-09 |
| First published | 2020-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 103 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 8975 |
| Author | urql GraphQL Contributors |
| Maintainers | michaelmerrill, sarmeyer, mariano-formidable, ryan.roemer, formidable-owner, formidablelabs, carbonrobot, masiddee, scott-rippey, sarahformidable, robwalkerco, ceceppa, keithluchtel, scottianstewart, philpl, andyrichardson, jdecroock, parkerziegler, npm-urql |
| Keywords | graphql client, state management, cache, graphql, exchanges, preact |

## Links

- npm: https://www.npmjs.com/package/@urql/preact
- Repository: https://github.com/urql-graphql/urql
- Homepage: https://formidable.com/open-source/urql/docs/
- Issues: https://github.com/urql-graphql/urql/issues
- npm.io page: https://npm.io/package/@urql/preact

## Dependencies (2)

- [wonka](https://npm.io/package/wonka.md) ^6.3.2
- [@urql/core](https://npm.io/package/@urql/core.md) ^6.0.0

## Alternatives

- [memory-cache](https://npm.io/package/memory-cache.md) — 795.0K weekly downloads
- [@httptoolkit/proxy-agent](https://npm.io/package/@httptoolkit/proxy-agent.md) — 11.2K weekly downloads
- [express-cache-controller](https://npm.io/package/express-cache-controller.md) — 5.3K weekly downloads
- [http-cache-middleware](https://npm.io/package/http-cache-middleware.md) — 4.5K weekly downloads
- [cache2](https://npm.io/package/cache2.md) — 1.5K weekly downloads

## Recent versions

- 5.0.0 (latest) — 2025-08-09
- 5.0.0-canary-b981b388ee9ed0066399a632aad6b84559f014a6 (canary) — 2025-08-09
- 1.0.0-alpha.0 (alpha) — 2020-01-05
- 5.0.0-canary-d3b019d51905c1c8b22be9ea1d9fe9ca4335a46c — 2025-08-09
- 5.0.0-canary-b2d8b993af4abb0ffc5c5284b90aca56c527f045 — 2025-06-29
- 4.1.2 — 2025-03-03
- 4.1.2-canary-573944cea80f766668d3b9d8aa1afd2c50d744a4 — 2025-03-03
- 4.1.1 — 2024-11-05
- 4.1.1-canary-8c90e08405709a7791f8288bc4063f9baad59e26 — 2024-11-05
- 4.1.0 — 2024-05-10
- 4.1.0-canary-9bf3289b — 2024-05-07
- 4.1.0-canary-019b1bb0 — 2024-05-04
- 4.1.0-canary-9272cefa — 2024-05-03
- 4.1.0-canary-0204e044 — 2024-05-03
- 4.0.5 — 2024-04-02
- … 107 more at https://npm.io/package/@urql/preact/versions

## README

<div align="center">
  <br />
  <br />
  <a href="https://www.npmjs.com/package/@urql/preact">
    <img alt="Npm version" src="https://badgen.net/npm/v/@urql/preact" />
  </a>
  <a href="https://bundlephobia.com/result?p=@urql/preact">
    <img alt="Minified gzip size" src="https://img.shields.io/bundlephobia/minzip/@urql/preact.svg?label=gzip%20size" />
  </a>
  <a href="https://github.com/urql-graphql/urql/discussions">
    <img alt="GitHub Discussions: Chat With Us" src="https://badgen.net/badge/discussions/chat%20with%20us/purple" />
  </a>
  <br />
  <br />
</div>

## Installation

```sh
yarn add @urql/preact urql graphql
# or
npm install --save @urql/preact urql graphql
```

## Usage

The usage is a 1:1 mapping of the React usage found [here](https://formidable.com/open-source/urql/docs)

small example:

```jsx
import { createClient, cacheExchange, fetchExchange, Provider, useQuery } from '@urql/preact';

const client = createClient({
  url: 'https://myHost/graphql',
  exchanges: [cacheExchange, fetchExchange],
});

const App = () => (
  <Provider value={client}>
    <Dogs />
  </Provider>
);

const Dogs = () => {
  const [result] = useQuery({
    query: `{ dogs { id name } }`,
  });

  if (result.fetching) return <p>Loading...</p>;
  if (result.error) return <p>Oh no...</p>;

  return result.data.dogs.map(dog => <p>{dog.name} is a good boy!</p>);
};
```

---
_Source: https://npm.io/package/@urql/preact · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._