Skip to content

Commit

Permalink
[NOREF] Use new graphql-codegen tool (#655)
Browse files Browse the repository at this point in the history
* WIP for new code generator

* Finalizing graphql codegen updates, bump versions

* Update folder structure for generated code
  • Loading branch information
ClayBenson94 authored Jul 31, 2023
1 parent 4dedc19 commit 3cbe166
Show file tree
Hide file tree
Showing 14 changed files with 4,502 additions and 176 deletions.
2 changes: 1 addition & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"ignorePatterns": ["**/*.d.ts", "serviceWorker.ts",".storybook/**/*"],
"ignorePatterns": ["**/*.d.ts", "serviceWorker.ts",".storybook/**/*","src/gql/gen/**/*"],
"globals" : {
"JSX" : "readonly"
},
Expand Down
5 changes: 3 additions & 2 deletions .pre-commit-config.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ repos:
- id: end-of-file-fixer
files: \.(sql|scss|md|js|ts|tsx|go|yml|yaml)$
name: Add newlines to ends of files
exclude: src/gql/gen/.* # Ignore generated FE files

- repo: https://github.com/detailyang/pre-commit-shell
rev: v1.0.6
Expand Down Expand Up @@ -66,7 +67,7 @@ repos:
entry: scripts/pre-commit-eslint
language: script
files: \.(js|jsx|ts|tsx)$
exclude: (\.(d\.ts)$)|(\.storybook)|(serviceWorker\.ts) # This should match the .eslintrc "ignorePatterns". Change one, change the other!
exclude: (\.(d\.ts)$)|(\.storybook)|(serviceWorker\.ts)|(src/gql/gen/.*) # This should match the .eslintrc "ignorePatterns". Change one, change the other!

- repo: local
hooks:
Expand All @@ -91,7 +92,7 @@ repos:
name: Run GraphQL code generation
entry: scripts/pre-commit-check-code-generation
language: script
files: "pkg/graph/schema\\.graphql|pkg/graph/schema\\.resolvers\\.go|src/queries/.*\\.ts"
files: "pkg/graph/schema\\.graphql|pkg/graph/schema\\.resolvers\\.go|src/queries/.*\\.ts|src/queriesCodegen/.*\\.ts"
pass_filenames: false

- repo: https://github.com/awslabs/git-secrets
Expand Down
24 changes: 24 additions & 0 deletions codegen.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
schema: 'pkg/graph/schema.graphql',
documents: ['src/gql/apolloGQL/**/*.ts'],
generates: {
'./src/gql/gen/': {
preset: 'client',
config: {
scalars: {
// old codegen mappings from global.d.ts
// maintain until we add better scalar mapping with graphql-codegen
//
// These currently just need to map to aliased types there
// Hopefully in the future we can use custom/useful types!
Time: 'Time',
UUID: 'UUID',
Upload: 'Upload'
}
}
}
}
};
export default config;
15 changes: 13 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"enzyme-to-json": "^3.6.2",
"font-awesome": "^4.7.0",
"formik": "^2.1.6",
"graphql": "^15.8.0",
"i18next": "^19.8.5",
"i18next-browser-languagedetector": "^5.0.0",
"istanbul-lib-coverage": "^3.0.0",
Expand Down Expand Up @@ -89,7 +90,7 @@
"lint:fix": "eslint --fix '**/*.{ts,tsx}'",
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"generate": "apollo client:codegen --passthroughCustomScalars --localSchemaFile=pkg/graph/schema.graphql --target typescript --tagName=gql --addTypename --globalTypesFile=src/types/graphql-global-types.ts types",
"generate": "graphql-codegen && apollo client:codegen --passthroughCustomScalars --localSchemaFile=pkg/graph/schema.graphql --target typescript --tagName=gql --addTypename --globalTypesFile=src/types/graphql-global-types.ts types",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
Expand Down Expand Up @@ -117,6 +118,8 @@
"devDependencies": {
"@apollo/react-testing": "^4.0.0",
"@cypress/webpack-preprocessor": "^5.12.2",
"@graphql-codegen/cli": "^5.0.0",
"@graphql-codegen/client-preset": "^4.1.0",
"@storybook/addon-actions": "^6.3.1",
"@storybook/addon-controls": "^6.3.1",
"@storybook/addon-essentials": "^6.3.1",
Expand Down Expand Up @@ -170,7 +173,15 @@
"lodash": "4.17.21",
"axios": "0.21.1",
"marked": "0.7.0",
"node-fetch": "2.6.1"
"node-fetch": "2.6.1",
"graphql": "15.8.0",
"@graphql-typed-document-node/core": "3.2.0"
},
"comments": {
"on_resolutions": {
"graphql": "Having graphql fixed at 15.8.0 allows apollo codegen and graphql-codegen to work together. Once the former is deprecated, you can remove this",
"typed_document_node": "https://github.com/dotansimha/graphql-code-generator/issues/9293"
}
},
"jest": {
"collectCoverageFrom": [
Expand Down
3 changes: 3 additions & 0 deletions src/global.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ declare global {

// These types are defined in GQL generated types.
// Defining globally here for FE to recognize generated types.
//
// Until we add better scalar mapping with graphql-codegen, anything added here should
// also be added to codegen.ts
type UUID = string;
type Time = string;
type Upload = File;
Expand Down
10 changes: 10 additions & 0 deletions src/gql/apolloGQL/getNDA.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { graphql } from '../gen/gql';

export default graphql(/* GraphQL */ `
query GetNDA {
ndaInfo {
agreed
agreedDts
}
}
`);
66 changes: 66 additions & 0 deletions src/gql/gen/fragment-masking.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
import { FragmentDefinitionNode } from 'graphql';
import { Incremental } from './graphql';


export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
infer TType,
any
>
? [TType] extends [{ ' $fragmentName'?: infer TKey }]
? TKey extends string
? { ' $fragmentRefs'?: { [key in TKey]: TType } }
: never
: never
: never;

// return non-nullable if `fragmentType` is non-nullable
export function useFragment<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
): TType;
// return nullable if `fragmentType` is nullable
export function useFragment<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
): TType | null | undefined;
// return array of non-nullable if `fragmentType` is array of non-nullable
export function useFragment<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
): ReadonlyArray<TType>;
// return array of nullable if `fragmentType` is array of nullable
export function useFragment<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
): ReadonlyArray<TType> | null | undefined;
export function useFragment<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
): TType | ReadonlyArray<TType> | null | undefined {
return fragmentType as any;
}


export function makeFragmentData<
F extends DocumentTypeDecoration<any, any>,
FT extends ResultOf<F>
>(data: FT, _fragment: F): FragmentType<F> {
return data as FragmentType<F>;
}
export function isFragmentReady<TQuery, TFrag>(
queryNode: DocumentTypeDecoration<TQuery, any>,
fragmentNode: TypedDocumentNode<TFrag>,
data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
): data is FragmentType<typeof fragmentNode> {
const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
?.deferredFields;

if (!deferredFields) return true;

const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
const fragName = fragDef?.name?.value;

const fields = (fragName && deferredFields[fragName]) || [];
return fields.length > 0 && fields.every(field => data && field in data);
}
42 changes: 42 additions & 0 deletions src/gql/gen/gql.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/* eslint-disable */
import * as types from './graphql';
import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';

/**
* Map of all GraphQL operations in the project.
*
* This map has several performance disadvantages:
* 1. It is not tree-shakeable, so it will include all operations in the project.
* 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
* 3. It does not support dead code elimination, so it will add unused operations.
*
* Therefore it is highly recommended to use the babel or swc plugin for production.
*/
const documents = {
"\n query GetNDA {\n ndaInfo {\n agreed\n agreedDts\n }\n }\n": types.GetNdaDocument,
};

/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*
*
* @example
* ```ts
* const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
* ```
*
* The query argument is unknown!
* Please regenerate the types.
*/
export function graphql(source: string): unknown;

/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query GetNDA {\n ndaInfo {\n agreed\n agreedDts\n }\n }\n"): (typeof documents)["\n query GetNDA {\n ndaInfo {\n agreed\n agreedDts\n }\n }\n"];

export function graphql(source: string) {
return (documents as any)[source] ?? {};
}

export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode< infer TType, any> ? TType : never;
Loading

0 comments on commit 3cbe166

Please sign in to comment.