feat(thegraph): auto-generate graphql types (#1926)

* auto-generate graphql types

* remove introspection

* generated .ts and add to prettierignore

* updated graph url

.prettierignore

@@ -0,0 +1 @@
+/src/state/data/generated.ts

codegen.yml

@@ -0,0 +1,10 @@
+schema: 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3'
+documents: 'src/**/!(*.d).{ts,tsx}'
+generates:
+  ./src/state/data/generated.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typescript-rtk-query:
+          importBaseApiFrom: './slice'
+          exportHooks: true

package.json

@@ -5,6 +5,10 @@
   "private": true,
   "devDependencies": {
     "@ethersproject/experimental": "^5.2.0",
+    "@graphql-codegen/cli": "1.21.5",
+    "@graphql-codegen/typescript": "1.22.3",
+    "@graphql-codegen/typescript-operations": "^1.18.2",
+    "@graphql-codegen/typescript-rtk-query": "^1.1.1",
     "@lingui/cli": "^3.9.0",
     "@lingui/loader": "^3.9.0",
     "@lingui/macro": "^3.9.0",
@@ -15,6 +19,7 @@
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
     "@reduxjs/toolkit": "^1.6.0",
+    "@rtk-query/graphql-request-base-query": "^1.0.3",
     "@typechain/ethers-v5": "^7.0.0",
     "@types/jest": "^25.2.1",
     "@types/lingui__core": "^2.7.1",
@@ -122,6 +127,7 @@
     "i18n:extract": "lingui extract --locale en-US",
     "i18n:compile": "lingui compile",
     "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
+    "graphql:generate": "graphql-codegen --config codegen.yml",
     "postinstall": "yarn compile-contract-types",
     "start": "yarn compile-contract-types && react-scripts start",
     "test": "react-scripts test --env=jsdom"

src/state/data/common.ts

@@ -1,23 +0,0 @@
-import { BaseQueryFn } from '@reduxjs/toolkit/query/react'
-import { DocumentNode } from 'graphql'
-import { ClientError, request } from 'graphql-request'
-
-export const UNISWAP_V3_GRAPH_URL = 'https://api.thegraph.com/subgraphs/name/ianlapham/uniswap-v3-alt'
-
-// wrapper around graphql-request to interface with rtk-query
-export const graphqlBaseQuery =
-  ({
-    baseUrl,
-  }: {
-    baseUrl: string
-  }): BaseQueryFn<{ document: string | DocumentNode; variables?: any }, unknown, ClientError> =>
-  async ({ document, variables }) => {
-    try {
-      return { data: await request(baseUrl, document, variables) }
-    } catch (error) {
-      if (error instanceof ClientError) {
-        return { error }
-      }
-      throw error
-    }
-  }

src/state/data/slice.ts

@@ -1,21 +1,22 @@
 import { createApi } from '@reduxjs/toolkit/query/react'
-import { gql } from 'graphql-request'
+import { gql, GraphQLClient } from 'graphql-request'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import { reduce } from 'lodash'
+import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query'
 
-import { graphqlBaseQuery, UNISWAP_V3_GRAPH_URL } from './common'
 import { FeeTierDistribution, PoolTVL } from './types'
 
-export const dataApi = createApi({
+export const UNISWAP_V3_GRAPH_URL = 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3'
+
+export const client = new GraphQLClient(UNISWAP_V3_GRAPH_URL)
+export const api = createApi({
   reducerPath: 'dataApi',
-  baseQuery: graphqlBaseQuery({
-    baseUrl: UNISWAP_V3_GRAPH_URL,
-  }),
+  baseQuery: graphqlRequestBaseQuery({ client }),
   endpoints: (builder) => ({
     getFeeTierDistribution: builder.query<FeeTierDistribution, { token0: string; token1: string }>({
       query: ({ token0, token1 }) => ({
         document: gql`
-          query pools($token0: Bytes!, $token1: Bytes!) {
+          query pools($token0: String!, $token1: String!) {
             _meta {
               block {
                 number
@@ -106,4 +107,4 @@ export const dataApi = createApi({
   }),
 })
 
-export const { useGetFeeTierDistributionQuery } = dataApi
+export const { useGetFeeTierDistributionQuery } = api

src/state/index.ts

@@ -1,4 +1,4 @@
-import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
+import { configureStore } from '@reduxjs/toolkit'
 import { save, load } from 'redux-localstorage-simple'
 
 import application from './application/reducer'
@@ -12,6 +12,7 @@ import lists from './lists/reducer'
 import burn from './burn/reducer'
 import burnV3 from './burn/v3/reducer'
 import multicall from './multicall/reducer'
+import { api } from './data/slice'
 
 const PERSISTED_KEYS: string[] = ['user', 'transactions', 'lists']
 
@@ -27,8 +28,12 @@ const store = configureStore({
     burnV3,
     multicall,
     lists,
+    [api.reducerPath]: api.reducer,
   },
-  middleware: [...getDefaultMiddleware({ thunk: false }), save({ states: PERSISTED_KEYS, debounce: 1000 })],
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({ thunk: true })
+      .concat(api.middleware)
+      .concat(save({ states: PERSISTED_KEYS, debounce: 1000 })),
   preloadedState: load({ states: PERSISTED_KEYS }),
 })