kitten.sh
1<div align="center">
2 <br />
3 <br />
4 <a href="https://www.npmjs.com/package/@urql/preact">
5 <img alt="Npm version" src="https://badgen.net/npm/v/@urql/preact" />
6 </a>
7 <a href="https://bundlephobia.com/result?p=@urql/preact">
8 <img alt="Minified gzip size" src="https://img.shields.io/bundlephobia/minzip/@urql/preact.svg?label=gzip%20size" />
9 </a>
10 <a href="https://github.com/urql-graphql/urql/discussions">
11 <img alt="GitHub Discussions: Chat With Us" src="https://badgen.net/badge/discussions/chat%20with%20us/purple" />
12 </a>
13 <br />
14 <br />
15</div>
16
17## Installation
18
19```sh
20yarn add @urql/preact urql graphql
21# or
22npm install --save @urql/preact urql graphql
23```
24
25## Usage
26
27The usage is a 1:1 mapping of the React usage found [here](https://formidable.com/open-source/urql/docs)
28
29small example:
30
31```jsx
32import { createClient, cacheExchange, fetchExchange, Provider, useQuery } from '@urql/preact';
33
34const client = createClient({
35 url: 'https://myHost/graphql',
36 exchanges: [cacheExchange, fetchExchange],
37});
38
39const App = () => (
40 <Provider value={client}>
41 <Dogs />
42 </Provider>
43);
44
45const Dogs = () => {
46 const [result] = useQuery({
47 query: `{ dogs { id name } }`,
48 });
49
50 if (result.fetching) return <p>Loading...</p>;
51 if (result.error) return <p>Oh no...</p>;
52
53 return result.data.dogs.map(dog => <p>{dog.name} is a good boy!</p>);
54};
55```