ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add graphql codgen and refactor some code 

Use unique names for all queries and fragments and mutations
This commit is contained in:
Ramon Wenger 2023-07-31 18:06:57 +02:00
parent bd637286d1
commit 36b60c6a2e
15 changed files with 16943 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/codegen.ts Normal file
View File

@ -0,0 +1,17 @@
import { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
schema: ['../server/schema.graphql', './local.graphql'],
documents: ['src/**/*.vue'],
generates: {
'src/__generated__/': {
preset: 'client',
plugins: [],
presetConfig: {
useTypeImports: true
},
},
},
ignoreNoDocuments: true
};
export default config;

3
client/local.graphql Normal file
View File

@ -0,0 +1,3 @@
type ModuleNode {
inEditMode: Boolean!
}

14584
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
client/package.json
View File

@ -30,7 +30,9 @@
"cypress:parallel:run": "cy2 run --parallel --record --config-file cypress.frontend.json --ci-build-id ",
"currents": "cypress-cloud run --parallel --record --config-file cypress.frontend.ts",
"prettier": "prettier . --write",
"prettier:check": "prettier . --check"
"prettier:check": "prettier . --check",
"codegen": "graphql-codegen",
"codegen-watch": "graphql-codegen -w"
},
"dependencies": {
"@apollo/client": "^3.5.10",
@ -41,6 +43,8 @@
"@babel/preset-stage-2": "^7.0.0",
"@babel/preset-typescript": "^7.16.7",
"@babel/runtime": "^7.5.4",
"@graphql-codegen/cli": "^5.0.0",
"@graphql-codegen/client-preset": "^4.1.0",
"@graphql-tools/jest-transform": "^1.2.2",
"@graphql-tools/mock": "^8.6.5",
"@graphql-tools/schema": "^8.3.7",

66
client/src/__generated__/fragment-masking.ts generated Normal file
View File

@ -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);
}

67
client/src/__generated__/gql.ts generated Normal file
View File

@ -0,0 +1,67 @@
/* 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 ReadOnlyQuery {\n me {\n readOnly\n selectedClass {\n readOnly\n }\n }\n }\n ": types.ReadOnlyQueryDocument,
"\n fragment SnapshotFragment on SnapshotNode {\n title\n }\n ": types.SnapshotFragmentFragmentDoc,
"\n query ModuleEditModeQuery($slug: String) {\n module(slug: $slug) {\n inEditMode @client\n slug\n }\n }\n": types.ModuleEditModeQueryDocument,
"\n query ChapterQuery($id: ID!) {\n chapter(id: $id) {\n path\n }\n }\n ": types.ChapterQueryDocument,
"\n query ContentBlockQuery($id: ID!) {\n contentBlock(id: $id) {\n path\n }\n }\n ": types.ContentBlockQueryDocument,
"\n query ModuleSolutions($slug: String) {\n module(slug: $slug) {\n solutionsEnabled\n slug\n }\n }\n": types.ModuleSolutionsDocument,
};
/**
* 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 ReadOnlyQuery {\n me {\n readOnly\n selectedClass {\n readOnly\n }\n }\n }\n "): (typeof documents)["\n query ReadOnlyQuery {\n me {\n readOnly\n selectedClass {\n readOnly\n }\n }\n }\n "];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment SnapshotFragment on SnapshotNode {\n title\n }\n "): (typeof documents)["\n fragment SnapshotFragment on SnapshotNode {\n title\n }\n "];
/**
* 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 ModuleEditModeQuery($slug: String) {\n module(slug: $slug) {\n inEditMode @client\n slug\n }\n }\n"): (typeof documents)["\n query ModuleEditModeQuery($slug: String) {\n module(slug: $slug) {\n inEditMode @client\n slug\n }\n }\n"];
/**
* 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 ChapterQuery($id: ID!) {\n chapter(id: $id) {\n path\n }\n }\n "): (typeof documents)["\n query ChapterQuery($id: ID!) {\n chapter(id: $id) {\n path\n }\n }\n "];
/**
* 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 ContentBlockQuery($id: ID!) {\n contentBlock(id: $id) {\n path\n }\n }\n "): (typeof documents)["\n query ContentBlockQuery($id: ID!) {\n contentBlock(id: $id) {\n path\n }\n }\n "];
/**
* 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 ModuleSolutions($slug: String) {\n module(slug: $slug) {\n solutionsEnabled\n slug\n }\n }\n"): (typeof documents)["\n query ModuleSolutions($slug: String) {\n module(slug: $slug) {\n solutionsEnabled\n slug\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;

2312
client/src/__generated__/graphql.ts generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
client/src/__generated__/index.ts generated Normal file
View File

@ -0,0 +1,2 @@
export * from "./fragment-masking";
export * from "./gql";

2
client/src/components/ReadOnlyBanner.vue
View File

@ -48,7 +48,7 @@ export default {
apollo: {
me: {
query: gql`
query {
query ReadOnlyQuery {
me {
readOnly
selectedClass {

18
client/src/components/modules/SnapshotListItem.vue
View File

@ -57,6 +57,12 @@ import TrashIcon from '@/components/icons/TrashIcon.vue';
import { removeAtIndex } from '@/graphql/immutable-operations';
import { matomoTrackEvent } from '@/helpers/matomo-client';
const SNAPSHOT_FRAGMENT = gql`
fragment SnapshotFragment on SnapshotNode {
title
}
`
export default {
props: {
snapshot: {
@ -113,11 +119,7 @@ export default {
const { id, title } = snapshot;
store.writeFragment({
id,
fragment: gql`
fragment SnapshotFragment on SnapshotNode {
title
}
`,
fragment: SNAPSHOT_FRAGMENT,
data: {
title,
__typename: 'SnapshotNode',
@ -206,11 +208,7 @@ export default {
) {
store.writeFragment({
id,
fragment: gql`
fragment SnapshotFragment on SnapshotNode {
shared
}
`,
fragment: SNAPSHOT_FRAGMENT,
data: {
shared,
__typename: 'SnapshotNode',

2
client/src/graphql/gql/mutations/updateFeedbackWithText.gql
View File

@ -1,4 +1,4 @@
mutation UpdateSubmissionFeedback($input: UpdateSubmissionFeedbackInput!) {
mutation UpdateSubmissionFeedbackWithText($input: UpdateSubmissionFeedbackInput!) {
updateSubmissionFeedback(input: $input) {
successful
updatedSubmissionFeedback {

2
client/src/graphql/gql/queries/instrumentQueryById.gql
View File

@ -1,5 +1,5 @@
#import "../fragments/instrumentParts.gql"
query InstrumentQuery($id: ID!) {
query InstrumentQueryById($id: ID!) {
instrument(id: $id) {
...InstrumentParts
}

2
client/src/graphql/gql/queries/roomEntryByIdQuery.gql
View File

@ -1,5 +1,5 @@
#import "../fragments/roomEntryParts.gql"
query RoomEntryQuery($id: ID!) {
query RoomEntryByIdQuery($id: ID!) {
roomEntry(id: $id) {
...RoomEntryParts
}

6
client/src/graphql/queries.js
View File

@ -3,6 +3,7 @@ import ME_QUERY from './gql/queries/meQuery.gql';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
import { useQuery } from '@vue/apollo-composable';
import { graphql } from '@/__generated__/gql';
export function moduleQuery() {
return {
@ -15,9 +16,10 @@ export function moduleQuery() {
const getModule = () => {
const route = useRoute();
const { result } = useQuery(MODULE_DETAILS_QUERY, {
slug: route.params.slug,
const query = graphql(MODULE_DETAILS_QUERY, {
slug: route.params.slug
});
const { result } = useQuery(query);
const module = computed(() => result.value?.module || {});
return { module };

72
client/src/pages/test.vue
View File

@ -1,72 +0,0 @@
<template>
<div>
<button @click="makeQuery">Normal Query</button>
<pre>
{{ module }}
</pre>
</div>
</template>
<script>
import gql from 'graphql-tag';
// import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
// import MODULE_PARTS from '@/graphql/gql/fragments/moduleParts.gql';
const moduleParts = gql`
fragment ModuleParts on ModuleNode {
id
title
}
`;
const moduleQuery = gql`
${moduleParts}
query ModuleQuery {
module(slug: "lohn-und-budget") {
...ModuleParts
}
}
`;
const moduleAndObjectivesQuery = gql`
${moduleParts}
query ModuleQuery {
module(slug: "lohn-und-budget") {
...ModuleParts
objectiveGroups {
edges {
node {
id
}
}
}
}
}
`;
export default {
data() {
return {
objectiveGroups: {},
module: {},
};
},
methods: {
makeQuery() {
console.log('click');
this.$apollo.query({ query: moduleQuery });
},
},
apollo: {
// me: ME_QUERY
// objectiveGroups: gql,
module: moduleAndObjectivesQuery,
},
};
</script>
<style scoped lang="scss">
@import 'styles/helpers';
</style>