feat: add graphQl support

- add codegen for Ts, operations, react-query
- create fetcher with api endpoint
- setup graphqlconfig for subsquid endpoint
- colocated dummy query for example WIP 🚧

.eslintignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+generated

.graphqlconfig

@@ -0,0 +1,4 @@
+{
+  "name": "Subsquid GraphQL Schema",
+  "schemaPath": "https://squid.subsquid.io/origin-squid/v/v2/graphql"
+}

.prettierignore

@@ -1,3 +1,4 @@
 # Add files here to ignore them from prettier formatting
 /dist
-/coverage
+/coverage
+generated

libs/oeth/history/src/queries.generated.tsx

@@ -0,0 +1,28 @@
+import { graphqlClient } from '@origin/shared/data-access';
+import { useQuery } from '@tanstack/react-query';
+
+import type * as Types from '@origin/shared/data-access';
+import type { UseQueryOptions } from '@tanstack/react-query';
+export type DummyQueryVariables = Types.Exact<{ [key: string]: never }>;
+
+export type DummyQuery = {
+  __typename?: 'Query';
+  squidStatus?: { __typename?: 'SquidStatus'; height?: number | null } | null;
+};
+
+export const DummyDocument = `
+    query Dummy {
+  squidStatus {
+    height
+  }
+}
+    `;
+export const useDummyQuery = <TData = DummyQuery, TError = unknown>(
+  variables?: DummyQueryVariables,
+  options?: UseQueryOptions<DummyQuery, TError, TData>,
+) =>
+  useQuery<DummyQuery, TError, TData>(
+    variables === undefined ? ['Dummy'] : ['Dummy', variables],
+    graphqlClient<DummyQuery, DummyQueryVariables>(DummyDocument, variables),
+    options,
+  );

libs/oeth/history/src/queries.graphql

@@ -0,0 +1,5 @@
+query Dummy {
+  squidStatus {
+    height
+  }
+}

libs/oeth/history/src/views/HistoryView.tsx

@@ -1,5 +1,10 @@
 import { HistoryCard } from '../components/HistoryCard';
+import { useDummyQuery } from '../queries.generated';
 
 export function HistoryView() {
+  const { data } = useDummyQuery();
+
+  console.log(data);
+
   return <HistoryCard />;
 }

libs/shared/data-access/codegen.ts

@@ -0,0 +1,29 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  generates: {
+    'libs/shared/data-access/src/generated/graphql.ts': {
+      schema: 'https://squid.subsquid.io/origin-squid/v/v2/graphql',
+      documents: ['**/src/**/*.graphql'],
+      plugins: ['typescript'],
+    },
+    '.': {
+      schema: 'https://squid.subsquid.io/origin-squid/v/v2/graphql',
+      documents: ['**/src/**/*.graphql'],
+      preset: 'near-operation-file',
+      presetConfig: {
+        extension: '.generated.tsx',
+        baseTypesPath: '~@origin/shared/data-access',
+      },
+      hooks: { afterOneFileWrite: ['prettier --write', 'eslint --fix'] },
+      plugins: ['typescript-operations', 'typescript-react-query'],
+      config: {
+        fetcher: {
+          func: '@origin/shared/data-access#graphqlClient',
+        },
+      },
+    },
+  },
+};
+
+export default config;

libs/shared/data-access/project.json

@@ -5,6 +5,14 @@
   "projectType": "library",
   "tags": [],
   "targets": {
+    "codegen-graphql": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "pnpm graphql-codegen --config 'libs/shared/data-access/codegen.ts'"
+        ]
+      }
+    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/shared/data-access/src/client.ts

@@ -1,5 +1,21 @@
-import { QueryClient } from '@tanstack/react-query';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import axios from 'axios';
 
-export const queryClient = new QueryClient({
-  defaultOptions: { queries: { staleTime: 1000 * 60 * 20 } },
+export const axiosInstance = axios.create({
+  baseURL: 'https://squid.subsquid.io/origin-squid/v/v2',
 });
+
+export const graphqlClient =
+  <_, TVariables>(query: string, variables?: TVariables) =>
+  async () => {
+    const res = await axiosInstance({
+      url: '/graphql',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      data: { query, variables },
+    });
+
+    return res.data['errors']?.[0] || res.data['data'];
+  };