feat: use runtime env instead of build env for thegraph token

next.config.js

@@ -15,7 +15,6 @@ const nextConfig = {
   },
   publicRuntimeConfig: {
     version,
-    THEGRAPH_API_KEY: process.env.NEXT_PUBLIC_THEGRAPH_API_KEY,
   },
 };
 

src/pages/_app.tsx

@@ -41,6 +41,9 @@ const i18n = initLanguage(resources)
 type AppProps = NextAppProps & {
   colorScheme: MantineColorScheme
   locale: string
+  env: {
+    THEGRAPH_API_KEY: string
+  }
 }
 
 const queryClient = new QueryClient({})
@@ -67,7 +70,17 @@ const libraryConnectors = getConnectors({
   walletConnectV2: walletConnect,
 } as unknown as ConnectorsAvailable)
 
-const App = ({ Component, pageProps, colorScheme }: AppProps) => {
+export const getServerSideProps = async () => ({
+  props: {
+    THEGRAPH_API_KEY:
+      process.env.THEGRAPH_API_KEY ?? process.env.NEXT_PUBLIC_THEGRAPH_API_KEY,
+  },
+})
+
+const App = ({ Component, pageProps, colorScheme, env }: AppProps) => {
+  if (typeof window !== 'undefined') {
+    process.env = { ...process.env, ...env }
+  }
   function scrollToTop() {
     document.getElementById('main-layout-container')?.scroll({
       top: 0,
@@ -104,9 +117,16 @@ const App = ({ Component, pageProps, colorScheme }: AppProps) => {
   )
 }
 
-App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
-  colorScheme: getCookie('mantine-color-scheme', ctx) || 'dark',
-  locale: getCookie('react-i18next', ctx) || 'fr',
-})
+App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => {
+  return {
+    env: {
+      THEGRAPH_API_KEY:
+        process.env.THEGRAPH_API_KEY ??
+        process.env.NEXT_PUBLIC_THEGRAPH_API_KEY,
+    },
+    colorScheme: getCookie('mantine-color-scheme', ctx) || 'dark',
+    locale: getCookie('react-i18next', ctx) || 'fr',
+  }
+}
 
 export default App

src/repositories/subgraphs/clients.ts

@@ -1,42 +1,67 @@
-import getConfig from 'next/config'
-
 import { ApolloClient, InMemoryCache } from '@apollo/client'
 
-const { publicRuntimeConfig } = getConfig()
-const API_KEY = publicRuntimeConfig.THEGRAPH_API_KEY as string
-
-export const GnosisClient = new ApolloClient({
-  uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/FPPoFB7S2dcCNrRyjM5QbaMwKqRZPdbTg8ysBrwXd4SP`,
-  cache: new InMemoryCache(),
-})
-
-export const EthereumClient = new ApolloClient({
-  uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/EVjGN4mMd9h9JfGR7yLC6T2xrJf9syhjQNboFb7GzxVW`,
-  cache: new InMemoryCache(),
-})
-
-export const RMM2Client = new ApolloClient({
-  uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/CxvZgcPjmtvFeSoSW9N563K7ZcHCwLVv8kXMbmuBKhv1`,
-  cache: new InMemoryCache(),
-})
-
-export const RMM3Client = new ApolloClient({
-  uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2xrWGGZ5r8Z7wdNdHxhbRVKcAD2dDgv3F2NcjrZmxifJ`,
-  cache: new InMemoryCache(),
-})
-
-export const RMM3WrapperClient = new ApolloClient({
-  uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2dMMk7DbQYPX6Gi5siJm6EZ2gDQBF8nJcgKtpiPnPBsK`,
-  cache: new InMemoryCache(),
-})
-
-export const LevinSwapClient = new ApolloClient({
-  uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2zkYvVc8xsmytcEjE9pr523qFcbvqRGxhuGGtraozs66`,
-  cache: new InMemoryCache(),
-})
-
-export const YamStatisticsClient = new ApolloClient({
-  uri: 'https://api.thegraph.com/subgraphs/name/jycssu-com/yam-history-gnosis',
-  // uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/4eJa4rKCR5f8fq48BKbYBPvf7DWHppGZRvfiVUSFXBGR`,
-  cache: new InMemoryCache(),
-})
+function lazyInit<T>(fn: (API_KEY: string) => T) {
+  let result: T | undefined
+  return () => {
+    if (!result) {
+      result = fn(process.env.THEGRAPH_API_KEY ?? '')
+    }
+    return result
+  }
+}
+
+export const GnosisClient = lazyInit(
+  (API_KEY: string) =>
+    new ApolloClient({
+      uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/FPPoFB7S2dcCNrRyjM5QbaMwKqRZPdbTg8ysBrwXd4SP`,
+      cache: new InMemoryCache(),
+    }),
+)
+
+export const EthereumClient = lazyInit(
+  (API_KEY: string) =>
+    new ApolloClient({
+      uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/EVjGN4mMd9h9JfGR7yLC6T2xrJf9syhjQNboFb7GzxVW`,
+      cache: new InMemoryCache(),
+    }),
+)
+
+export const RMM2Client = lazyInit(
+  (API_KEY: string) =>
+    new ApolloClient({
+      uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/CxvZgcPjmtvFeSoSW9N563K7ZcHCwLVv8kXMbmuBKhv1`,
+      cache: new InMemoryCache(),
+    }),
+)
+
+export const RMM3Client = lazyInit(
+  (API_KEY: string) =>
+    new ApolloClient({
+      uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2xrWGGZ5r8Z7wdNdHxhbRVKcAD2dDgv3F2NcjrZmxifJ`,
+      cache: new InMemoryCache(),
+    }),
+)
+
+export const RMM3WrapperClient = lazyInit(
+  (API_KEY: string) =>
+    new ApolloClient({
+      uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2dMMk7DbQYPX6Gi5siJm6EZ2gDQBF8nJcgKtpiPnPBsK`,
+      cache: new InMemoryCache(),
+    }),
+)
+
+export const LevinSwapClient = lazyInit(
+  (API_KEY: string) =>
+    new ApolloClient({
+      uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2zkYvVc8xsmytcEjE9pr523qFcbvqRGxhuGGtraozs66`,
+      cache: new InMemoryCache(),
+    }),
+)
+
+export const YamStatisticsClient = lazyInit(
+  (API_KEY: string) =>
+    new ApolloClient({
+      uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/4eJa4rKCR5f8fq48BKbYBPvf7DWHppGZRvfiVUSFXBGR`,
+      cache: new InMemoryCache(),
+    }),
+)

src/repositories/subgraphs/queries/levinswap.queries.ts

@@ -17,7 +17,7 @@ export async function getLevinSwapBalances(
 
 const executeQuery = useCacheWithLocalStorage(
   async (addressList: string[]) =>
-    LevinSwapClient.query<LevinSwapResult>({
+    LevinSwapClient().query<LevinSwapResult>({
       query: LevinSwapQuery,
       variables: { addressList },
     }),

src/repositories/subgraphs/queries/realtoken.queries.ts

@@ -18,11 +18,11 @@ export async function getRealtokenBalances(addressList: string[]) {
 const executeQuery = useCacheWithLocalStorage(
   async (addressList: string[]) =>
     Promise.all([
-      GnosisClient.query<RealtokenResult>({
+      GnosisClient().query<RealtokenResult>({
         query: RealtokenQuery,
         variables: { addressList },
       }),
-      EthereumClient.query<RealtokenResult>({
+      EthereumClient().query<RealtokenResult>({
         query: RealtokenQuery,
         variables: { addressList },
       }),

src/repositories/subgraphs/queries/rmm.queries.ts

@@ -39,7 +39,7 @@ export interface RmmPosition {
 
 const executeRMM2Query = useCacheWithLocalStorage(
   async (addressList: string[]) =>
-    RMM2Client.query<RmmResult>({
+    RMM2Client().query<RmmResult>({
       query: RmmQuery,
       variables: { addressList },
     }),
@@ -52,12 +52,12 @@ const executeRMM2Query = useCacheWithLocalStorage(
 
 const executeRMM3Query = useCacheWithLocalStorage(
   async (addressList: string[]) => {
-    const mainQuery = RMM3Client.query<RmmResult>({
+    const mainQuery = RMM3Client().query<RmmResult>({
       query: RmmQuery,
       variables: { addressList },
     })
 
-    const wrapperQuery = RMM3WrapperClient.query<RmmWrapperResult>({
+    const wrapperQuery = RMM3WrapperClient().query<RmmWrapperResult>({
       query: RmmWrapperQuery,
       variables: { addressList },
     })

src/repositories/subgraphs/queries/transfers.queries.ts

@@ -32,7 +32,7 @@ async function executeQuery(
   if (!client) throw new Error(`Chain ID ${chainId} is not supported`)
 
   const execute = async (lastId: string) =>
-    client.query<RealTokenTransferResult>({
+    client().query<RealTokenTransferResult>({
       query: RealTokenTransferQuery,
       variables: { addressList, limit, lastId, timestamp },
     })

src/repositories/subgraphs/queries/user.queries.ts

@@ -36,7 +36,7 @@ function formatUserDetails(result: GetUserDetailsResult) {
 
 const executeGetUserIdQuery = useCacheWithLocalStorage(
   async (address: string) =>
-    GnosisClient.query<GetUserIdResult>({
+    GnosisClient().query<GetUserIdResult>({
       query: GetUserIdQuery,
       variables: { address },
     }),
@@ -49,7 +49,7 @@ const executeGetUserIdQuery = useCacheWithLocalStorage(
 
 const executeGetTrustedIntermediaryQuery = useCacheWithLocalStorage(
   async () =>
-    GnosisClient.query<GetTrustedIntermediaryResult>({
+    GnosisClient().query<GetTrustedIntermediaryResult>({
       query: GetTrustedIntermediaryQuery,
     }),
   {
@@ -61,7 +61,7 @@ const executeGetTrustedIntermediaryQuery = useCacheWithLocalStorage(
 
 const executeGetUserDetailsQuery = useCacheWithLocalStorage(
   async (userId: string) =>
-    GnosisClient.query<GetUserDetailsResult>({
+    GnosisClient().query<GetUserDetailsResult>({
       query: GetUserDetailsQuery,
       variables: { userId },
     }),

src/repositories/subgraphs/queries/yam.queries.ts

@@ -17,7 +17,7 @@ export async function getRealtokenYamStatistics(address: string) {
 
 const executeQuery = useCacheWithLocalStorage(
   async (address: string) =>
-    YamStatisticsClient.query<YamStatisticsResult>({
+    YamStatisticsClient().query<YamStatisticsResult>({
       query: YamStatisticsQuery,
       variables: {
         address,