@live: add an example for handling Live query using polling

.changeset/@graphprotocol_client-add-source-name-178-dependencies.md

@@ -0,0 +1,13 @@
+---
+"@graphprotocol/client-add-source-name": patch
+---
+
+dependencies updates: 
+
+- Updated dependency [`tslib@^2.4.0` ↗︎](https://www.npmjs.com/package/tslib/v/null) (from `2.4.0`, in `dependencies`)
+- Removed dependency [`@graphql-tools/[email protected]` ↗︎](https://www.npmjs.com/package/@graphql-tools/delegate/v/9.0.3) (from `dependencies`)
+- Removed dependency [`@graphql-tools/[email protected]` ↗︎](https://www.npmjs.com/package/@graphql-tools/wrap/v/9.0.4) (from `dependencies`)
+- Removed dependency [`@graphql-tools/[email protected]` ↗︎](https://www.npmjs.com/package/@graphql-tools/utils/v/8.10.0) (from `dependencies`)
+- Added dependency [`@graphql-tools/[email protected]` ↗︎](https://www.npmjs.com/package/@graphql-tools/delegate/v/9.0.3) (to `peerDependencies`)
+- Added dependency [`@graphql-tools/[email protected]` ↗︎](https://www.npmjs.com/package/@graphql-tools/wrap/v/9.0.4) (to `peerDependencies`)
+- Added dependency [`@graphql-tools/[email protected]` ↗︎](https://www.npmjs.com/package/@graphql-tools/utils/v/8.10.0) (to `peerDependencies`)

.changeset/@graphprotocol_client-apollo-178-dependencies.md

@@ -0,0 +1,7 @@
+---
+"@graphprotocol/client-apollo": patch
+---
+
+dependencies updates: 
+
+- Updated dependency [`tslib@^2.4.0` ↗︎](https://www.npmjs.com/package/tslib/v/null) (from `2.4.0`, in `dependencies`)

.changeset/@graphprotocol_client-auto-pagination-178-dependencies.md

@@ -0,0 +1,7 @@
+---
+"@graphprotocol/client-auto-pagination": patch
+---
+
+dependencies updates: 
+
+- Updated dependency [`tslib@^2.4.0` ↗︎](https://www.npmjs.com/package/tslib/v/null) (from `2.4.0`, in `dependencies`)

.changeset/@graphprotocol_client-auto-type-merging-178-dependencies.md

@@ -0,0 +1,7 @@
+---
+"@graphprotocol/client-auto-type-merging": patch
+---
+
+dependencies updates: 
+
+- Updated dependency [`tslib@^2.4.0` ↗︎](https://www.npmjs.com/package/tslib/v/null) (from `2.4.0`, in `dependencies`)

.changeset/@graphprotocol_client-block-tracking-178-dependencies.md

@@ -0,0 +1,9 @@
+---
+"@graphprotocol/client-block-tracking": patch
+---
+
+dependencies updates: 
+
+- Updated dependency [`tslib@^2.4.0` ↗︎](https://www.npmjs.com/package/tslib/v/null) (from `2.4.0`, in `dependencies`)
+- Added dependency [`@graphql-tools/delegate@^9.0.3` ↗︎](https://www.npmjs.com/package/@graphql-tools/delegate/v/null) (to `peerDependencies`)
+- Removed dependency [`@graphql-mesh/types@^0.78.0` ↗︎](https://www.npmjs.com/package/@graphql-mesh/types/v/null) (from `peerDependencies`)

.changeset/@graphprotocol_client-cli-178-dependencies.md

@@ -0,0 +1,8 @@
+---
+"@graphprotocol/client-cli": patch
+---
+
+dependencies updates: 
+
+- Updated dependency [`tslib@^2.4.0` ↗︎](https://www.npmjs.com/package/tslib/v/null) (from `2.4.0`, in `dependencies`)
+- Added dependency [`@graphprotocol/[email protected]` ↗︎](https://www.npmjs.com/package/@graphprotocol/client-polling-live/v/0.0.0) (to `dependencies`)

.changeset/@graphprotocol_client-cli-dependencies.md

@@ -0,0 +1,7 @@
+---
+"@graphprotocol/client-cli": patch
+---
+
+### Dependencies Updates
+
+- Updated dependency ([`@graphql-mesh/[email protected]` ↗︎](https://www.npmjs.com/package/@graphql-mesh/cli/v/0.75.7)) (was `0.75.6`, in `dependencies`)

.changeset/@graphprotocol_client-urql-178-dependencies.md

@@ -0,0 +1,7 @@
+---
+"@graphprotocol/client-urql": patch
+---
+
+dependencies updates: 
+
+- Updated dependency [`tslib@^2.4.0` ↗︎](https://www.npmjs.com/package/tslib/v/null) (from `2.4.0`, in `dependencies`)

.changeset/config.json

@@ -15,7 +15,10 @@
     "react-query-example",
     "nextjs-example",
     "cross-chain-sdk",
-    "cross-chain-extension"
+    "cross-chain-extension",
+    "live-queries-example",
+    "urql-live-example",
+    "*-example"
   ],
   "access": "public",
   "baseBranch": "main",

.changeset/metal-books-live.md

@@ -0,0 +1,6 @@
+---
+'@graphprotocol/client-polling-live': major
+'@graphprotocol/client-cli': minor
+---
+
+New polling-based `@live` queries plugin.

.github/workflows/ci.yml

@@ -18,14 +18,10 @@ jobs:
       - name: Checkout Repository
         uses: actions/checkout@v3
 
-      - name: Use Node
-        uses: actions/setup-node@master
+      - uses: the-guild-org/shared-config/setup@main
+        name: setup env
         with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
-
-      - name: Install Dependencies using Yarn
-        run: yarn
+          nodeVersion: ${{ matrix.node-version }}
 
       - name: Build Packages
         run: yarn build

.gitignore

@@ -17,4 +17,6 @@ examples/**/node_modules
 
 *.tsbuildinfo
 coverage/
-.bob
+.bob
+.env
+.graphclient

README.md

@@ -28,6 +28,7 @@ This library is intended to simplify the network aspect of data consumption for
 | ✅     | Integration with `@apollo/client`                               |                                                                                                                                  |
 | ✅     | Integration with `urql`                                         |                                                                                                                                  |
 | ✅     | TypeScript support                                              | with built-in GraphQL Codegen and `TypedDocumentNode`                                                                            |
+| ✅     | [`@live` queries](./docs/live.md)                               | Based on polling                                                                                                                 |
 
 > You can find an [extended architecture design here](./docs/architecture.md)
 

docs/live.md

@@ -0,0 +1,43 @@
+### `@live` queries in `graph-client`
+
+Graph-Client implements a custom `@live` directive that can make every GraphQL query work with real-time data.
+
+#### Getting Started
+
+Start by adding the following configuration to your `.graphclientrc.yml` file:
+
+```yml
+plugins:
+  - pollingLive:
+      defaultInterval: 1000
+```
+
+#### Usage
+
+Set the default update interval you wish to use, and then you can apply the following GraphQL `@directive` over your GraphQL queries:
+
+```graphql
+query ExampleQuery @live {
+  transactions(first: 2, orderBy: timestamp, orderDirection: desc) {
+    id
+    blockNumber
+    timestamp
+  }
+}
+```
+
+Or, you can specify a per-query interval:
+
+```graphql
+query ExampleQuery @live(interval: 5000) {
+  transactions(first: 2, orderBy: timestamp, orderDirection: desc) {
+    id
+  }
+}
+```
+
+#### Integrations
+
+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`).
+
+No additional setup is required for GraphQL clients cache updates.

examples/live-queries/.graphclientrc.yml

@@ -0,0 +1,12 @@
+sources:
+  - name: Sushi
+    handler:
+      graphql:
+        endpoint: https://api.thegraph.com/subgraphs/name/sushiswap/exchange
+
+plugins:
+  - pollingLive:
+      defaultInterval: 1000
+
+documents:
+  - ./example-query.graphql

examples/live-queries/example-query.graphql

@@ -0,0 +1,7 @@
+query ExampleQuery @live {
+  transactions(first: 2, orderBy: timestamp, orderDirection: desc) {
+    id
+    blockNumber
+    timestamp
+  }
+}

examples/live-queries/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "live-queries-example",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "build-client": "graphclient build",
+    "check": "tsc --pretty --noEmit",
+    "start": "graphclient serve-dev"
+  },
+  "dependencies": {
+    "@graphprotocol/client-cli": "2.1.3",
+    "@graphprotocol/client-polling-live": "0.0.0",
+    "graphql": "16.5.0"
+  }
+}

examples/urql-live-query/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.graphclient

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

@@ -0,0 +1,12 @@
+sources:
+  - name: Sushi
+    handler:
+      graphql:
+        endpoint: https://api.thegraph.com/subgraphs/name/sushiswap/exchange
+
+plugins:
+  - pollingLive:
+      defaultInterval: 1000
+
+documents:
+  - ./src/example-query.graphql

examples/urql-live-query/README.md

@@ -0,0 +1,22 @@
+### The Graph Client / Urql / `@live`
+
+This example integrates The Graph Client with [Urql](https://formidable.com/open-source/urql/), with an example for using `@live` queries.
+
+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.
+
+### Getting Started
+
+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:
+
+```
+# In the root directory
+$ yarn install
+$ yarn build
+$ cd examples/urql-live-query/
+$ yarn build-client
+$ yarn start
+```
+
+### DevTools
+
+You can also run The Graph Client DevTools by running: `yarn graphiql`.

examples/urql-live-query/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/urql-live-query/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "urql-live-example",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "build-client": "graphclient build",
+    "graphiql": "graphclient serve-dev"
+  },
+  "dependencies": {
+    "@graphprotocol/client-urql": "1.0.4",
+    "graphql": "16.6.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "urql": "2.2.3"
+  },
+  "devDependencies": {
+    "@graphprotocol/client-cli": "2.1.3",
+    "@types/react": "18.0.17",
+    "@types/react-dom": "18.0.6",
+    "@vitejs/plugin-react": "2.0.1",
+    "typescript": "4.7.4",
+    "vite": "3.0.8"
+  }
+}

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

@@ -0,0 +1,50 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 20vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: 18px;
+}
+
+fieldset {
+  width: 50vw;
+}
+
+textarea {
+  width: 100%;
+}