Skip to content

Commit 21b962d

Browse files
dotansimhadotansimha
committed
fixes, added docs and examples
1 parent 2e0ecdc commit 21b962d

20 files changed

Lines changed: 335 additions & 2 deletions

‎.changeset/config.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
"nextjs-example",
1717
"cross-chain-sdk",
1818
"cross-chain-extension",
19-
"live-queries-example"
19+
"live-queries-example",
20+
"urql-live-example",
21+
"*-example"
2022
],
2123
"access": "public",
2224
"baseBranch": "main",

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ This library is intended to simplify the network aspect of data consumption for
2828
| ✅ | Integration with `@apollo/client` | |
2929
| ✅ | Integration with `urql` | |
3030
| ✅ | TypeScript support | with built-in GraphQL Codegen and `TypedDocumentNode` |
31+
| ✅ | [`@live` queries](./docs/live.md) | Based on polling |
3132

3233
> You can find an [extended architecture design here](./docs/architecture.md)
3334

‎docs/live.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
### `@live` queries in `graph-client`
2+
3+
Graph-Client implements a custom `@live` directive that can make every GraphQL query work with real-time data.
4+
5+
#### Getting Started
6+
7+
Start by adding the following configuration to your `.graphclientrc.yml` file:
8+
9+
```yml
10+
plugins:
11+
- pollingLive:
12+
defaultInterval: 1000
13+
```
14+
15+
#### Usage
16+
17+
Set the default update interval you wish to use, and then you can apply the following GraphQL `@directive` over your GraphQL queries:
18+
19+
```graphql
20+
query ExampleQuery @live {
21+
transactions(first: 2, orderBy: timestamp, orderDirection: desc) {
22+
id
23+
blockNumber
24+
timestamp
25+
}
26+
}
27+
```
28+
29+
Or, you can specify a per-query interval:
30+
31+
```graphql
32+
query ExampleQuery @live(interval: 5000) {
33+
transactions(first: 2, orderBy: timestamp, orderDirection: desc) {
34+
id
35+
}
36+
}
37+
```
38+
39+
#### Integrations
40+
41+
Since the entire network layer (along with the `@live` mechanism) is implemented inside `graph-client` core, you can use Live queries with every GraphQL client (such as Urql or Apollo-Client), as long as it supports streame responses (`AsyncIterable`).
42+
43+
No additional setup is required for GraphQL clients cache updates.

‎examples/urql-live-query/.gitignore‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
.graphclient

‎examples/urql-live-query/.graphclientrc.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
sources:
2+
- name: Sushi
3+
handler:
4+
graphql:
5+
endpoint: https://api.thegraph.com/subgraphs/name/sushiswap/exchange
6+
7+
plugins:
8+
- pollingLive:
9+
defaultInterval: 1000
10+
11+
documents:
12+
- ./src/example-query.graphql

‎examples/urql-live-query/README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
### The Graph Client / Urql / `@live`
2+
3+
This example integrates The Graph Client with [Urql](https://formidable.com/open-source/urql/), with an example for using `@live` queries.
4+
5+
By using `@live` over a `query`, we are able to get the Urql cache updating automatically when the actual data changes in the network layer.
6+
7+
### Getting Started
8+
9+
To run this example, make sure to install the dependencies in the root of the monorepo, build the client locally, and then run this example:
10+
11+
```
12+
# In the root directory
13+
$ yarn install
14+
$ yarn build
15+
$ cd examples/urql-live-query/
16+
$ yarn build-client
17+
$ yarn start
18+
```
19+
20+
### DevTools
21+
22+
You can also run The Graph Client DevTools by running: `yarn graphiql`.

‎examples/urql-live-query/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/urql-live-query/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "urql-live-example",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"start": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"build-client": "graphclient build",
10+
"graphiql": "graphclient serve-dev"
11+
},
12+
"dependencies": {
13+
"@graphprotocol/client-urql": "1.0.4",
14+
"graphql": "16.6.0",
15+
"react": "18.2.0",
16+
"react-dom": "18.2.0",
17+
"urql": "2.2.3"
18+
},
19+
"devDependencies": {
20+
"@graphprotocol/client-cli": "2.1.3",
21+
"@types/react": "18.0.17",
22+
"@types/react-dom": "18.0.6",
23+
"@vitejs/plugin-react": "2.0.1",
24+
"typescript": "4.7.4",
25+
"vite": "3.0.8"
26+
}
27+
}

‎examples/urql-live-query/src/App.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-logo {
6+
height: 20vmin;
7+
pointer-events: none;
8+
}
9+
10+
@media (prefers-reduced-motion: no-preference) {
11+
.App-logo {
12+
animation: App-logo-spin infinite 20s linear;
13+
}
14+
}
15+
16+
.App-header {
17+
background-color: #282c34;
18+
min-height: 100vh;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
font-size: 18px;
24+
color: white;
25+
}
26+
27+
.App-link {
28+
color: #61dafb;
29+
}
30+
31+
@keyframes App-logo-spin {
32+
from {
33+
transform: rotate(0deg);
34+
}
35+
to {
36+
transform: rotate(360deg);
37+
}
38+
}
39+
40+
button {
41+
font-size: 18px;
42+
}
43+
44+
fieldset {
45+
width: 50vw;
46+
}
47+
48+
textarea {
49+
width: 100%;
50+
}

‎examples/urql-live-query/src/App.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import logo from './logo.svg'
2+
import './App.css'
3+
import { useQuery } from 'urql'
4+
import { ExampleQueryDocument } from '../.graphclient'
5+
6+
function App() {
7+
const [result, reexecuteQuery] = useQuery({
8+
query: ExampleQueryDocument,
9+
})
10+
11+
const { data, fetching, error } = result
12+
return (
13+
<div className="App">
14+
<header className="App-header">
15+
<img src={logo} className="App-logo" alt="logo" />
16+
<p>Graph Client with Urql Example with @live</p>
17+
<p>
18+
<button type="button" onClick={() => reexecuteQuery()} disabled={fetching}>
19+
Re Execute Query
20+
</button>
21+
</p>
22+
<p>{fetching ? 'Loading...' : 'You can find the result below...'}</p>
23+
<fieldset>
24+
{data && (
25+
<form>
26+
<label>Data</label>
27+
<br />
28+
<textarea value={JSON.stringify(data, null, 2)} readOnly rows={25} />
29+
</form>
30+
)}
31+
{error && (
32+
<form>
33+
<label>Error</label>
34+
<br />
35+
<textarea value={JSON.stringify(error, null, 2)} readOnly rows={25} />
36+
</form>
37+
)}
38+
</fieldset>
39+
</header>
40+
</div>
41+
)
42+
}
43+
44+
export default App

0 commit comments

Comments
 (0)