Skip to content

Commit

Permalink
feat: add graphQl support
Browse files Browse the repository at this point in the history
- add codegen for Ts, operations, react-query
- create fetcher with api endpoint
- setup graphqlconfig for subsquid endpoint
- colocated dummy query for example WIP 🚧
  • Loading branch information
toniocodo committed Sep 4, 2023
1 parent c648001 commit 267fe3c
Show file tree
Hide file tree
Showing 13 changed files with 2,548 additions and 37 deletions.
3 changes: 2 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules
dist
dist
generated
4 changes: 4 additions & 0 deletions .graphqlconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "Subsquid GraphQL Schema",
"schemaPath": "https://squid.subsquid.io/origin-squid/v/v2/graphql"
}
3 changes: 2 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
# Add files here to ignore them from prettier formatting
/dist
/coverage
/coverage
generated
28 changes: 28 additions & 0 deletions libs/oeth/history/src/queries.generated.tsx
Original file line number Diff line number Diff line change
@@ -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,
);
5 changes: 5 additions & 0 deletions libs/oeth/history/src/queries.graphql
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
query Dummy {
squidStatus {
height
}
}
5 changes: 5 additions & 0 deletions libs/oeth/history/src/views/HistoryView.tsx
Original file line number Diff line number Diff line change
@@ -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 />;
}
29 changes: 29 additions & 0 deletions libs/shared/data-access/codegen.ts
Original file line number Diff line number Diff line change
@@ -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;
8 changes: 8 additions & 0 deletions libs/shared/data-access/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -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}"],
Expand Down
22 changes: 19 additions & 3 deletions libs/shared/data-access/src/client.ts
Original file line number Diff line number Diff line change
@@ -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'];
};
Loading

0 comments on commit 267fe3c

Please sign in to comment.