diff --git a/.changeset/@graphprotocol_client-add-source-name-178-dependencies.md b/.changeset/@graphprotocol_client-add-source-name-178-dependencies.md new file mode 100644 index 00000000..2f7a05ac --- /dev/null +++ b/.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/delegate@9.0.3` ↗︎](https://www.npmjs.com/package/@graphql-tools/delegate/v/9.0.3) (from `dependencies`) +- Removed dependency [`@graphql-tools/wrap@9.0.4` ↗︎](https://www.npmjs.com/package/@graphql-tools/wrap/v/9.0.4) (from `dependencies`) +- Removed dependency [`@graphql-tools/utils@8.10.0` ↗︎](https://www.npmjs.com/package/@graphql-tools/utils/v/8.10.0) (from `dependencies`) +- Added dependency [`@graphql-tools/delegate@9.0.3` ↗︎](https://www.npmjs.com/package/@graphql-tools/delegate/v/9.0.3) (to `peerDependencies`) +- Added dependency [`@graphql-tools/wrap@9.0.4` ↗︎](https://www.npmjs.com/package/@graphql-tools/wrap/v/9.0.4) (to `peerDependencies`) +- Added dependency [`@graphql-tools/utils@8.10.0` ↗︎](https://www.npmjs.com/package/@graphql-tools/utils/v/8.10.0) (to `peerDependencies`) diff --git a/.changeset/@graphprotocol_client-apollo-178-dependencies.md b/.changeset/@graphprotocol_client-apollo-178-dependencies.md new file mode 100644 index 00000000..f997a45a --- /dev/null +++ b/.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`) diff --git a/.changeset/@graphprotocol_client-auto-pagination-178-dependencies.md b/.changeset/@graphprotocol_client-auto-pagination-178-dependencies.md new file mode 100644 index 00000000..b30f2371 --- /dev/null +++ b/.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`) diff --git a/.changeset/@graphprotocol_client-auto-type-merging-178-dependencies.md b/.changeset/@graphprotocol_client-auto-type-merging-178-dependencies.md new file mode 100644 index 00000000..0a7b2fd1 --- /dev/null +++ b/.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`) diff --git a/.changeset/@graphprotocol_client-block-tracking-178-dependencies.md b/.changeset/@graphprotocol_client-block-tracking-178-dependencies.md new file mode 100644 index 00000000..0b2d1da4 --- /dev/null +++ b/.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`) diff --git a/.changeset/@graphprotocol_client-cli-178-dependencies.md b/.changeset/@graphprotocol_client-cli-178-dependencies.md new file mode 100644 index 00000000..8a6c1cf3 --- /dev/null +++ b/.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/client-polling-live@0.0.0` ↗︎](https://www.npmjs.com/package/@graphprotocol/client-polling-live/v/0.0.0) (to `dependencies`) diff --git a/.changeset/@graphprotocol_client-cli-dependencies.md b/.changeset/@graphprotocol_client-cli-dependencies.md new file mode 100644 index 00000000..86b92e46 --- /dev/null +++ b/.changeset/@graphprotocol_client-cli-dependencies.md @@ -0,0 +1,7 @@ +--- +"@graphprotocol/client-cli": patch +--- + +### Dependencies Updates + +- Updated dependency ([`@graphql-mesh/cli@0.75.7` ↗︎](https://www.npmjs.com/package/@graphql-mesh/cli/v/0.75.7)) (was `0.75.6`, in `dependencies`) diff --git a/.changeset/@graphprotocol_client-urql-178-dependencies.md b/.changeset/@graphprotocol_client-urql-178-dependencies.md new file mode 100644 index 00000000..52fefa75 --- /dev/null +++ b/.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`) diff --git a/.changeset/config.json b/.changeset/config.json index ebc8a0fe..5e2f173d 100644 --- a/.changeset/config.json +++ b/.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", diff --git a/.changeset/metal-books-live.md b/.changeset/metal-books-live.md new file mode 100644 index 00000000..91b78201 --- /dev/null +++ b/.changeset/metal-books-live.md @@ -0,0 +1,6 @@ +--- +'@graphprotocol/client-polling-live': major +'@graphprotocol/client-cli': minor +--- + +New polling-based `@live` queries plugin. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 3fa73def..194b565a 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/.gitignore b/.gitignore index a6ded2d5..176466e2 100644 --- a/.gitignore +++ b/.gitignore @@ -17,4 +17,6 @@ examples/**/node_modules *.tsbuildinfo coverage/ -.bob \ No newline at end of file +.bob +.env +.graphclient diff --git a/README.md b/README.md index bb3c6098..b07a3c5b 100644 --- a/README.md +++ b/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) diff --git a/docs/live.md b/docs/live.md new file mode 100644 index 00000000..933fbc1c --- /dev/null +++ b/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. diff --git a/examples/live-queries/.graphclientrc.yml b/examples/live-queries/.graphclientrc.yml new file mode 100644 index 00000000..22fd6c53 --- /dev/null +++ b/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 diff --git a/examples/live-queries/example-query.graphql b/examples/live-queries/example-query.graphql new file mode 100644 index 00000000..968c63cf --- /dev/null +++ b/examples/live-queries/example-query.graphql @@ -0,0 +1,7 @@ +query ExampleQuery @live { + transactions(first: 2, orderBy: timestamp, orderDirection: desc) { + id + blockNumber + timestamp + } +} diff --git a/examples/live-queries/package.json b/examples/live-queries/package.json new file mode 100644 index 00000000..a89ea1e5 --- /dev/null +++ b/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" + } +} diff --git a/examples/urql-live-query/.gitignore b/examples/urql-live-query/.gitignore new file mode 100644 index 00000000..61b5bf41 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/examples/urql-live-query/.graphclientrc.yml b/examples/urql-live-query/.graphclientrc.yml new file mode 100644 index 00000000..65540bb1 --- /dev/null +++ b/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 diff --git a/examples/urql-live-query/README.md b/examples/urql-live-query/README.md new file mode 100644 index 00000000..b7a46d0c --- /dev/null +++ b/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`. diff --git a/examples/urql-live-query/index.html b/examples/urql-live-query/index.html new file mode 100644 index 00000000..38f38611 --- /dev/null +++ b/examples/urql-live-query/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/examples/urql-live-query/package.json b/examples/urql-live-query/package.json new file mode 100644 index 00000000..324eabb8 --- /dev/null +++ b/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" + } +} diff --git a/examples/urql-live-query/src/App.css b/examples/urql-live-query/src/App.css new file mode 100644 index 00000000..271b115d --- /dev/null +++ b/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%; +} diff --git a/examples/urql-live-query/src/App.tsx b/examples/urql-live-query/src/App.tsx new file mode 100644 index 00000000..560f326a --- /dev/null +++ b/examples/urql-live-query/src/App.tsx @@ -0,0 +1,44 @@ +import logo from './logo.svg' +import './App.css' +import { useQuery } from 'urql' +import { ExampleQueryDocument } from '../.graphclient' + +function App() { + const [result, reexecuteQuery] = useQuery({ + query: ExampleQueryDocument, + }) + + const { data, fetching, error } = result + return ( +
+
+ logo +

Graph Client with Urql Example with @live

+

+ +

+

{fetching ? 'Loading...' : 'You can find the result below...'}

+
+ {data && ( +
+ +
+