ENG-4592 feat(graphql,template): add environment handling graphql and example in template

apps/template/app/root.tsx

@@ -21,16 +21,27 @@ import './styles/globals.css'
 import { useEffect } from 'react'
 
 import { Toaster } from '@0xintuition/1ui'
+import {
+  API_URL_DEV,
+  API_URL_PROD,
+  configureClient,
+} from '@0xintuition/graphql'
 
 import { ErrorPage } from '@components/error-page'
 import { getChainEnvConfig } from '@lib/utils/environment'
 import { CURRENT_ENV } from 'app/consts'
 import { ClientOnly } from 'remix-utils/client-only'
 import { useAccount, useSwitchChain } from 'wagmi'
 
+// Configure GraphQL client at module initialization using the URLs from the package
+// This can be updated to use the same environment approach that we use in Portal in the future, or leave up to the template user to configure however makes sense for their use case
+configureClient({
+  apiUrl: process.env.NODE_ENV === 'production' ? API_URL_PROD : API_URL_DEV,
+})
+
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
-    { title: data ? 'Intuition Explorer' : 'Error | Intuition Explorer' },
+    { title: data ? 'Intuition Template' : 'Error | Intuition Template' },
     {
       name: 'description',
       content: `Intuition is an ecosystem of technologies composing a universal and permissionless knowledge graph, capable of handling both objective facts and subjective opinions - delivering superior data for intelligences across the spectrum, from human to artificial.`,
@@ -40,9 +51,8 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
       content:
         'https://res.cloudinary.com/dfpwy9nyv/image/upload/f_auto,q_auto/v1/Portal%20Assets/Site%20Metadata/site-og-image',
     },
-    { property: 'og:site_name', content: 'Intuition Explorer' },
+    { property: 'og:site_name', content: 'Intuition Template' },
     { property: 'og:locale', content: 'en_US' },
-    { property: 'og:url', content: 'https://beta.portal.intuition.systems' },
     {
       name: 'twitter:image',
       content:

packages/graphql/codegen.ts

@@ -4,7 +4,10 @@ import type { Types } from '@graphql-codegen/plugin-helpers'
 const commonGenerateOptions: Types.ConfiguredOutput = {
   config: {
     reactQueryVersion: 5,
-    fetcher: '../client#fetcher',
+    fetcher: {
+      func: '../client#fetcher',
+      isReactHook: false,
+    },
     exposeDocument: true,
     exposeFetcher: true,
     exposeQueryKeys: true,

packages/graphql/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@0xintuition/graphql",
   "description": "GraphQL",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

packages/graphql/src/client.ts

@@ -1,7 +1,20 @@
 import { GraphQLClient } from 'graphql-request'
 
+import { API_URL_DEV } from './constants'
+
 export interface ClientConfig {
   headers: HeadersInit
+  apiUrl?: string
+}
+
+const DEFAULT_API_URL = API_URL_DEV
+
+let globalConfig: { apiUrl?: string } = {
+  apiUrl: DEFAULT_API_URL,
+}
+
+export function configureClient(config: { apiUrl: string }) {
+  globalConfig = { ...globalConfig, ...config }
 }
 
 export function getClientConfig(token?: string): ClientConfig {
@@ -10,16 +23,18 @@ export function getClientConfig(token?: string): ClientConfig {
       ...(token && { authorization: `Bearer ${token}` }),
       'Content-Type': 'application/json',
     },
+    apiUrl: globalConfig.apiUrl,
   }
 }
 
-// add userId back in when we need to add user auth for mutations
-// TODO: Abstract this to allow for different environments
 export function createServerClient({ token }: { token?: string }) {
-  return new GraphQLClient(
-    'https://api.i7n.dev/v1/graphql',
-    getClientConfig(token),
-  )
+  const config = getClientConfig(token)
+  if (!config.apiUrl) {
+    throw new Error(
+      'GraphQL API URL not configured. Call configureClient first.',
+    )
+  }
+  return new GraphQLClient(config.apiUrl, config)
 }
 
 export const fetchParams = () => {
@@ -36,7 +51,13 @@ export function fetcher<TData, TVariables>(
   options?: RequestInit['headers'],
 ) {
   return async () => {
-    const res = await fetch('https://api.i7n.dev/v1/graphql', {
+    if (!globalConfig.apiUrl) {
+      throw new Error(
+        'GraphQL API URL not configured. Call configureClient first.',
+      )
+    }
+
+    const res = await fetch(globalConfig.apiUrl, {
       method: 'POST',
       ...fetchParams(),
       ...options,

packages/graphql/src/constants.ts

@@ -0,0 +1,2 @@
+export const API_URL_DEV = 'https://api.i7n.dev/v1/graphql'
+export const API_URL_PROD = 'https://api.i7n.app/v1/graphql'

packages/graphql/src/index.ts

@@ -1,2 +1,8 @@
 export * from './generated/index'
-export * from './client'
+export * from './constants'
+export {
+  configureClient,
+  fetcher,
+  createServerClient,
+  type ClientConfig,
+} from './client'