Added graphql-codegen to viz

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*.generated.*

.graphqlconfig.yml

@@ -0,0 +1 @@
+schema: https://registry-prod.graphcdn.app

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "graphql.vscode-graphql"
+  ]
+}

codegen.yml

@@ -0,0 +1,15 @@
+schema:
+  - https://registry-prod.graphcdn.app
+documents:
+  - 'src/graphql/**/*.graphql'
+generates:
+  graphql/schemaTypes.generated.ts:
+    - typescript
+  graphql/:
+    preset: near-operation-file
+    presetConfig:
+      baseTypesPath: 'schemaTypes.generated.ts'
+      extension: '.generated.ts'
+    plugins:
+      - typescript-operations
+      - typed-document-node

package.json

@@ -27,11 +27,14 @@
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1",
     "web-worker": "^1.0.0",
-    "xstate": "^4.23.0"
+    "xstate": "^4.23.0",
+    "@graphql-typed-document-node/core": "^3.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "concurrently \"npm:start:app\" \"npm:graphql:codegen\"",
+    "start:app": "react-scripts start",
+    "build": "graphql-codegen && react-scripts build",
+    "graphql:codegen": "graphql-codegen --watch",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -57,6 +60,13 @@
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "sass": "^1.33.0",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "concurrently": "^6.2.0",
+    "@graphql-codegen/cli": "^1.21.5",
+    "@graphql-codegen/near-operation-file-preset": "^1.18.1",
+    "@graphql-codegen/typed-document-node": "^1.18.6",
+    "@graphql-codegen/typescript": "^1.22.1",
+    "@graphql-codegen/typescript-operations": "^1.18.0",
+    "graphql": "^15.5.0"
   }
 }

src/clientMachine.tsx

@@ -7,18 +7,19 @@ import {
 import {
   ActorRefFrom,
   assign,
+  createMachine,
   EventFrom,
   forwardTo,
   MachineOptions,
+  send,
+  spawn,
 } from 'xstate';
-import { spawn } from 'xstate';
-import { send } from 'xstate';
-import { createMachine } from 'xstate';
 import { createModel } from 'xstate/lib/model';
 import { cacheCodeChangesMachine } from './cacheCodeChangesMachine';
 import { confirmBeforeLeavingService } from './confirmLeavingService';
+import { CreateSourceFileDocument } from './graphql/CreateSourceFile.generated';
+import { UpdateSourceFileDocument } from './graphql/UpdateSourceFile.generated';
 import { notifMachine, notifModel } from './notificationMachine';
-import { CreateSourceQuery, UpdateSourceQuery } from './types';
 import { gQuery, updateQueryParamsWithoutReload } from './utils';
 
 const clientModel = createModel(
@@ -70,19 +71,22 @@ const clientOptions: Partial<
   services: {
     saveMachines: async (ctx, e) => {
       if (e.type !== 'SAVE') return;
-      return gQuery<CreateSourceQuery>(
-        `mutation {createSourceFile(text: ${JSON.stringify(
-          e.rawSource,
-        )}) {id}}`,
+      return gQuery(
+        CreateSourceFileDocument,
+        {
+          text: e.rawSource,
+        },
         ctx.client.auth.session()?.access_token!,
       ).then((data) => data.data?.createSourceFile);
     },
     updateMachines: async (ctx, e) => {
       if (e.type !== 'UPDATE') return;
-      return gQuery<UpdateSourceQuery>(
-        `mutation {updateSourceFile(id: ${JSON.stringify(
-          e.id,
-        )}, text: ${JSON.stringify(e.rawSource)}) {id}}`,
+      return gQuery(
+        UpdateSourceFileDocument,
+        {
+          id: e.id,
+          text: e.rawSource,
+        },
         ctx.client.auth.session()?.access_token!,
       ).then((data) => data.data?.updateSourceFile);
     },

src/graphql/CreateSourceFile.graphql

@@ -0,0 +1,5 @@
+mutation CreateSourceFile($text: String!) {
+  createSourceFile(text: $text) {
+    id
+  }
+}

src/graphql/GetSourceFile.graphql

@@ -0,0 +1,11 @@
+query GetSourceFile($id: String!) {
+  getSourceFile(id: $id) {
+    id
+    updatedAt
+    owner {
+      id
+      avatarUrl
+      displayName
+    }
+  }
+}

src/graphql/UpdateSourceFile.graphql

@@ -0,0 +1,5 @@
+mutation UpdateSourceFile($id: String!, $text: String!) {
+  updateSourceFile(id: $id, text: $text) {
+    id
+  }
+}

src/sourceMachine.tsx

@@ -1,16 +1,16 @@
 import {
   ActorRefFrom,
   assign,
+  ContextFrom,
   createMachine,
   DoneInvokeEvent,
   send,
   spawn,
-  ContextFrom,
 } from 'xstate';
 import { createModel } from 'xstate/lib/model';
+import { GetSourceFileDocument } from './graphql/GetSourceFile.generated';
 import { localCache } from './localCache';
 import { notifMachine } from './notificationMachine';
-import { GetSourceFile } from './types';
 import { gQuery, updateQueryParamsWithoutReload } from './utils';
 
 type SourceProvider = 'gist' | 'registry';
@@ -153,9 +153,7 @@ export const sourceMachine = createMachine<typeof sourceModel>(
       isSourceIDAvailable: (ctx) => !!ctx.sourceID,
     },
     services: {
-      loadSourceContent: (
-        ctx,
-      ): Promise<{ text: string; updatedAt?: string }> => {
+      loadSourceContent: (ctx) => {
         switch (ctx.sourceProvider) {
           case 'gist':
             return fetch('https://api.github.com/gists/' + ctx.sourceID)
@@ -176,13 +174,11 @@ export const sourceMachine = createMachine<typeof sourceModel>(
                 );
               });
           case 'registry':
-            return gQuery<GetSourceFile>(
-              `query {getSourceFile(id: ${JSON.stringify(
-                ctx.sourceID,
-              )}) {id,text,updatedAt}}`,
-            ).then((data) => {
-              if (data.data?.getSourceFile) {
-                return data.data.getSourceFile;
+            return gQuery(GetSourceFileDocument, {
+              id: ctx.sourceID,
+            }).then((res) => {
+              if (res.data?.getSourceFile) {
+                return Promise.resolve(res.data.getSourceFile);
               }
               return Promise.reject(
                 new NotFoundError('Source not found in Registry'),

src/types.ts

@@ -8,26 +8,6 @@ import { Model } from 'xstate/lib/model.types';
 
 export type AnyStateMachine = StateMachine<any, any, any>;
 
-export type CreateSourceQuery = {
-  createSourceFile: {
-    id: string;
-  };
-};
-
-export type UpdateSourceQuery = {
-  updateSourceFile: {
-    id: string;
-  };
-};
-
-export type GetSourceFile = {
-  getSourceFile?: {
-    id: string;
-    text: string;
-    updatedAt: string;
-  };
-};
-
 export type StateFrom<T> = T extends StateMachine<
   infer TContext,
   any,

src/utils.ts

@@ -1,3 +1,4 @@
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import * as React from 'react';
 import type {
   ActionObject,
@@ -6,6 +7,7 @@ import type {
   TransitionDefinition,
 } from 'xstate';
 import { AnyState, AnyStateMachine } from './types';
+import { print } from 'graphql';
 
 export function createRequiredContext<T>(displayName: string) {
   const context = React.createContext<T | null>(null);
@@ -104,18 +106,20 @@ export const updateQueryParamsWithoutReload = (
   window.history.pushState({ path: newURL.href }, '', newURL.href);
 };
 
-export const gQuery = <Result>(
-  query: string,
+export const gQuery = <Data, Variables>(
+  query: TypedDocumentNode<Data, Variables>,
+  variables: Variables,
   accessToken?: string,
-): Promise<{ data?: Result }> =>
+): Promise<{ data?: Data }> =>
   fetch(process.env.REACT_APP_GRAPHQL_API_URL, {
     method: 'POST',
     headers: {
       'content-type': 'application/json',
       ...(accessToken && { authorization: 'Bearer ' + accessToken }),
     },
     body: JSON.stringify({
-      query,
+      query: print(query),
+      variables,
     }),
   }).then((resp) => resp.json());