diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 0902f2af..e1101b1f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -21,7 +21,7 @@ jobs: node-version: ${{ matrix.node-version }} - name: Get yarn cache - uses: c-client/gha-yarn-cache@v2 + uses: c-hive/gha-yarn-cache@v2 - name: Install Dependencies using Yarn run: yarn diff --git a/examples/nextjs/.eslintrc.json b/examples/nextjs/.eslintrc.json new file mode 100644 index 00000000..bffb357a --- /dev/null +++ b/examples/nextjs/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/examples/nextjs/.gitignore b/examples/nextjs/.gitignore new file mode 100644 index 00000000..f7ff4a4c --- /dev/null +++ b/examples/nextjs/.gitignore @@ -0,0 +1,39 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +.graphclient \ No newline at end of file diff --git a/examples/nextjs/.graphclientrc.yml b/examples/nextjs/.graphclientrc.yml new file mode 100644 index 00000000..ca150ae6 --- /dev/null +++ b/examples/nextjs/.graphclientrc.yml @@ -0,0 +1,12 @@ +sources: + - name: uniswapv2 + handler: + graphql: + endpoint: https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v2 + - name: compoundv2 + handler: + graphql: + endpoint: https://api.thegraph.com/subgraphs/name/graphprotocol/compound-v2 + +documents: + - ./example-query.graphql diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md new file mode 100644 index 00000000..bc75cf99 --- /dev/null +++ b/examples/nextjs/README.md @@ -0,0 +1,27 @@ +### The Graph Client / Next.js + +This examples integrates The Graph Client with [Next.js](https://nextjs.org/). + +The example here is using the following tools/concepts: + +- The Graph Client CLI for generating artifacts +- Client-side Compostion (more than 1 source) +- The Graph Client Typed SDK for consuming the Graph API in Next.js application +- `next` CLI for building the frontend project + +### 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/nextjs/ +$ yarn build-client +$ yarn dev +``` + +### DevTools + +You can also run The Graph Client DevTools by running: `yarn graphiql`. diff --git a/examples/nextjs/example-query.graphql b/examples/nextjs/example-query.graphql new file mode 100644 index 00000000..5617800b --- /dev/null +++ b/examples/nextjs/example-query.graphql @@ -0,0 +1,22 @@ +query ExampleQuery { + # this one is coming from compound-v2 + markets(first: 7) { + borrowRate + cash + collateralFactor + } + # this one is coming from uniswap-v2 + pair(id: "0x00004ee988665cdda9a1080d5792cecd16dc1220") { + id + token0 { + id + symbol + name + } + token1 { + id + symbol + name + } + } +} diff --git a/examples/nextjs/next-env.d.ts b/examples/nextjs/next-env.d.ts new file mode 100644 index 00000000..4f11a03d --- /dev/null +++ b/examples/nextjs/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/nextjs/next.config.js b/examples/nextjs/next.config.js new file mode 100644 index 00000000..a843cbee --- /dev/null +++ b/examples/nextjs/next.config.js @@ -0,0 +1,6 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, +} + +module.exports = nextConfig diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json new file mode 100644 index 00000000..14b34b1d --- /dev/null +++ b/examples/nextjs/package.json @@ -0,0 +1,26 @@ +{ + "name": "nextjs", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", + "build-client": "graphclient build", + "graphiql": "graphclient serve-dev" + }, + "dependencies": { + "next": "12.1.0", + "react": "17.0.2", + "react-dom": "17.0.2" + }, + "devDependencies": { + "@graphprotocol/client-cli": "0.0.2", + "@types/node": "17.0.21", + "@types/react": "17.0.41", + "eslint": "8.11.0", + "eslint-config-next": "12.1.0", + "typescript": "4.6.2" + } +} diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx new file mode 100644 index 00000000..3f5c9d54 --- /dev/null +++ b/examples/nextjs/pages/_app.tsx @@ -0,0 +1,8 @@ +import '../styles/globals.css' +import type { AppProps } from 'next/app' + +function MyApp({ Component, pageProps }: AppProps) { + return +} + +export default MyApp diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx new file mode 100644 index 00000000..07ef5450 --- /dev/null +++ b/examples/nextjs/pages/index.tsx @@ -0,0 +1,54 @@ +import type { NextPage } from 'next' +import Head from 'next/head' +import Image from 'next/image' +import styles from '../styles/Home.module.css' +import { ExampleQueryQuery, getBuiltGraphSDK } from '../.graphclient' + +const Home: NextPage<{ data: ExampleQueryQuery }> = ({ data }) => { + return ( +
+ + Graph Client Next.js Example + + + + +
+

+ Welcome to Graph Client Next.js Example +

+ +
+ +
+