feat: gql codegen + caching + optimistic

packages/hoppscotch-app/.eslintrc.js

@@ -18,6 +18,9 @@ module.exports = {
     "plugin:prettier/recommended",
     "plugin:nuxt/recommended",
   ],
+  ignorePatterns: [
+    "helpers/backend/graphql.ts"
+  ],
   plugins: ["vue", "prettier"],
   // add your custom rules here
   rules: {

packages/hoppscotch-app/.gitignore

@@ -110,3 +110,9 @@ tests/*/videos
 
 # Andrew's crazy Volar shim generator
 shims-volar.d.ts
+
+# Hoppscotch Backend Schema Introspection JSON
+helpers/backend/backend-schema.json
+
+# GraphQL Type Generation
+helpers/backend/graphql.ts

packages/hoppscotch-app/components/teams/Team.vue

@@ -73,11 +73,11 @@
 import { useContext } from "@nuxtjs/composition-api"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
+import { TeamMemberRole } from "~/helpers/backend/graphql"
 import {
   deleteTeam as backendDeleteTeam,
   leaveTeam,
 } from "~/helpers/backend/mutations/Team"
-import { TeamMemberRole } from "~/helpers/backend/types/TeamMemberRole"
 
 const props = defineProps<{
   team: {

packages/hoppscotch-app/components/teams/index.vue

@@ -71,12 +71,15 @@
 </template>
 
 <script setup lang="ts">
-import { gql } from "@apollo/client/core"
 import { ref, watchEffect } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
 import { useGQLQuery } from "~/helpers/backend/GQLClient"
+import {
+  MyTeamsDocument,
+  MyTeamsQuery,
+  MyTeamsQueryVariables,
+} from "~/helpers/backend/graphql"
 import { MyTeamsQueryError } from "~/helpers/backend/QueryErrors"
-import { TeamMemberRole } from "~/helpers/backend/types/TeamMemberRole"
 
 defineProps<{
   modal: boolean
@@ -88,47 +91,10 @@ const editingTeam = ref<any>({}) // TODO: Check this out
 const editingTeamID = ref<any>("")
 
 const myTeams = useGQLQuery<
-  {
+  MyTeamsQuery,
-    myTeams: Array<{
+  MyTeamsQueryVariables,
-      id: string
-      name: string
-      myRole: TeamMemberRole
-      ownersCount: number
-      members: Array<{
-        membershipID: string
-        user: {
-          photoURL: string | null
-          displayName: string
-          email: string
-          uid: string
-        }
-        role: TeamMemberRole
-      }>
-    }>
-  },
   MyTeamsQueryError
->(
+>(MyTeamsDocument)
-  gql`
-    query GetMyTeams {
-      myTeams {
-        id
-        name
-        myRole
-        ownersCount
-        members {
-          membershipID
-          user {
-            photoURL
-            displayName
-            email
-            uid
-          }
-          role
-        }
-      }
-    }
-  `
-)
 
 watchEffect(() => {
   console.log(myTeams)

packages/hoppscotch-app/gql-codegen.yml

@@ -0,0 +1,15 @@
+overwrite: true
+schema: https://api.hoppscotch.io/graphql
+generates:
+  helpers/backend/graphql.ts:
+    documents: "**/*.graphql"
+    plugins:
+      - add:
+          content: // Auto-generated file (DO NOT EDIT!!!), refer gql-codegen.yml
+      - typescript
+      - typescript-operations
+      - typed-document-node
+
+  helpers/backend/backend-schema.json:
+    plugins:
+      - urql-introspection

packages/hoppscotch-app/helpers/backend/GQLClient.ts

@@ -6,7 +6,6 @@ import {
   reactive,
   Ref,
 } from "@nuxtjs/composition-api"
-import { DocumentNode } from "graphql/language"
 import {
   createClient,
   TypedDocumentNode,
@@ -28,6 +27,8 @@ import clone from "lodash/clone"
 import { keyDefs } from "./caching/keys"
 import { optimisticDefs } from "./caching/optimistic"
 import { updatesDef } from "./caching/updates"
+import { resolversDef } from "./caching/resolvers"
+import schema from "./backend-schema.json"
 import {
   getAuthIDToken,
   probableUser$,
@@ -49,11 +50,12 @@ const client = createClient({
   exchanges: [
     devtoolsExchange,
     dedupExchange,
-    // TODO: Extract this outttttttt
     offlineExchange({
+      schema: schema as any,
       keys: keyDefs,
       optimistic: optimisticDefs,
       updates: updatesDef,
+      resolvers: resolversDef,
       storage,
     }),
     authExchange({
@@ -142,10 +144,10 @@ export function isLoadedGQLQuery<QueryFailType extends string, QueryReturnType>(
 
 export function useGQLQuery<
   QueryReturnType = any,
-  QueryFailType extends string = "",
+  QueryVariables extends object = {},
-  QueryVariables extends object = {}
+  QueryFailType extends string = ""
 >(
-  query: string | DocumentNode | TypedDocumentNode<any, QueryVariables>,
+  query: TypedDocumentNode<QueryReturnType, QueryVariables>,
   variables?: QueryVariables,
   options: Partial<GQL_QUERY_OPTIONS> = DEFAULT_QUERY_OPTIONS
 ):
@@ -223,19 +225,19 @@ export function useGQLQuery<
 }
 
 export const runMutation = <
-  MutationReturnType = any,
+  DocType,
-  MutationFailType extends string = "",
+  DocVariables extends object | undefined,
-  MutationVariables extends {} = {}
+  DocErrors extends string
 >(
-  mutation: string | DocumentNode | TypedDocumentNode<any, MutationVariables>,
+  mutation: TypedDocumentNode<DocType, DocVariables>,
-  variables?: MutationVariables,
+  variables?: DocVariables,
   additionalConfig?: Partial<OperationContext>
-): TE.TaskEither<GQLError<MutationFailType>, NonNullable<MutationReturnType>> =>
+): TE.TaskEither<GQLError<DocErrors>, DocType> =>
   pipe(
     TE.tryCatch(
       () =>
         client
-          .mutation<MutationReturnType>(mutation, variables, {
+          .mutation(mutation, variables, {
             requestPolicy: "cache-and-network",
             ...additionalConfig,
           })
@@ -244,7 +246,7 @@ export const runMutation = <
     ),
     TE.chainEitherK((result) =>
       pipe(
-        result.data as MutationReturnType,
+        result.data,
         E.fromNullable(
           // Result is null
           pipe(
@@ -253,13 +255,13 @@ export const runMutation = <
             E.match(
               // The left case (network error was null)
               (gqlErr) =>
-                <GQLError<MutationFailType>>{
+                <GQLError<DocErrors>>{
                   type: "gql_error",
-                  error: gqlErr as MutationFailType,
+                  error: gqlErr,
                 },
               // The right case (it was a GraphQL Error)
               (networkErr) =>
-                <GQLError<MutationFailType>>{
+                <GQLError<DocErrors>>{
                   type: "network_error",
                   error: networkErr,
                 }

packages/hoppscotch-app/helpers/backend/caching/keys.ts

@@ -1,4 +1,4 @@
-import { KeyingConfig } from "@urql/exchange-graphcache";
+import { KeyingConfig } from "@urql/exchange-graphcache"
 
 export const keyDefs: KeyingConfig = {
   User: (data) => (data as any).uid,

packages/hoppscotch-app/helpers/backend/caching/resolvers.ts

@@ -0,0 +1,14 @@
+import { ResolverConfig } from "@urql/exchange-graphcache"
+
+export const resolversDef: ResolverConfig = {
+  Query: {
+    team: (_parent, { teamID }, _cache, _info) => ({
+      __typename: "Team",
+      id: teamID as any,
+    }),
+    user: (_parent, { uid }, _cache, _info) => ({
+      __typename: "User",
+      uid: uid as any,
+    }),
+  },
+}

packages/hoppscotch-app/helpers/backend/caching/updates.ts

@@ -1,18 +1,12 @@
 import { UpdatesConfig } from "@urql/exchange-graphcache"
-import gql from "graphql-tag"
+import { MyTeamsDocument } from "../graphql"
 
 export const updatesDef: Partial<UpdatesConfig> = {
   Mutation: {
     deleteTeam: (_r, { teamID }, cache, _info) => {
       cache.updateQuery(
         {
-          query: gql`
+          query: MyTeamsDocument,
-            query {
-              myTeams {
-                id
-              }
-            }
-          `,
         },
         (data: any) => {
           data.myTeams = (data as any).myTeams.filter(
@@ -31,13 +25,7 @@ export const updatesDef: Partial<UpdatesConfig> = {
     leaveTeam: (_r, { teamID }, cache, _info) => {
       cache.updateQuery(
         {
-          query: gql`
+          query: MyTeamsDocument,
-            query {
-              myTeams {
-                id
-              }
-            }
-          `,
         },
         (data: any) => {
           data.myTeams = (data as any).myTeams.filter(
@@ -56,13 +44,7 @@ export const updatesDef: Partial<UpdatesConfig> = {
     createTeam: (result, _args, cache, _info) => {
       cache.updateQuery(
         {
-          query: gql`
+          query: MyTeamsDocument,
-            {
-              myTeams {
-                id
-              }
-            }
-          `,
         },
         (data: any) => {
           data.myTeams.push(result.createTeam)
@@ -70,77 +52,25 @@ export const updatesDef: Partial<UpdatesConfig> = {
         }
       )
     },
-    renameTeam: (_result, { teamID, newName }, cache, _info) => {
+    removeTeamMember: (_result, { teamID, userUid }, cache) => {
-      cache.updateQuery(
+      const newMembers = (
+        cache.resolve(
           {
-          query: gql`
+            __typename: "Team",
-            query GetTeam($teamID: ID!) {
+            id: teamID as string,
-              team(teamID: $teamID) {
-                id
-                name
-              }
-            }
-          `,
-          variables: {
-            teamID,
           },
-        },
+          "members"
-        (data: any) => {
+        ) as string[]
-          data.team.name = newName
-          return data
-        }
       )
-    },
+        .map((x) => [x, cache.resolve(x, "user") as string])
-    removeTeamMember: (_result, { userUid, teamID }, cache) => {
+        .map(([key, userKey]) => [key, cache.resolve(userKey, "uid") as string])
-      cache.updateQuery(
+        .filter(([_key, uid]) => uid !== userUid)
-        {
+        .map(([key]) => key)
-          query: gql`
+
-            query GetTeam($teamID: ID!) {
+      cache.link(
-              team(teamID: $teamID) {
+        { __typename: "Team", id: teamID as string },
-                members {
+        "members",
-                  user {
+        newMembers
-                    uid
-                  }
-                }
-              }
-            }
-          `,
-          variables: {
-            teamID,
-          },
-        },
-        (data: any) => {
-          data.team.members = data.team.members.filter(
-            (x: any) => x.user.uid !== userUid
-          )
-          return data
-        }
-      )
-    },
-    updateTeamMemberRole: (result, { userUid, teamID }, cache) => {
-      cache.updateQuery(
-        {
-          query: gql`
-            query GetTeam($teamID: ID!) {
-              team(teamID: $teamID) {
-                members {
-                  user {
-                    uid
-                  }
-                }
-              }
-            }
-          `,
-          variables: {
-            teamID,
-          },
-        },
-        (data: any) => {
-          data.team.members = data.team.members.map((x: any) =>
-            x.user.uid !== userUid ? x : result
-          )
-          return data
-        }
       )
     },
   },

packages/hoppscotch-app/helpers/backend/gql/mutations/CreateTeam.graphql

@@ -0,0 +1,20 @@
+mutation CreateTeam($name: String!) {
+  createTeam(name: $name) {
+    id
+    name
+    members {
+      membershipID
+      role
+      user {
+        uid
+        displayName
+        email
+        photoURL
+      }
+    }
+    myRole
+    ownersCount
+    editorsCount
+    viewersCount
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/mutations/DeleteTeam.graphql

@@ -0,0 +1,3 @@
+mutation DeleteTeam($teamID: ID!) {
+  deleteTeam(teamID: $teamID)
+}

packages/hoppscotch-app/helpers/backend/gql/mutations/LeaveTeam.graphql

@@ -0,0 +1,3 @@
+mutation LeaveTeam($teamID: ID!) {
+  leaveTeam(teamID: $teamID)
+}

packages/hoppscotch-app/helpers/backend/gql/mutations/RemoveTeamMember.graphql

@@ -0,0 +1,3 @@
+mutation RemoveTeamMember($userUid: ID!, $teamID: ID!) {
+  removeTeamMember(userUid: $userUid, teamID: $teamID)
+}

packages/hoppscotch-app/helpers/backend/gql/mutations/RenameTeam.graphql

@@ -0,0 +1,13 @@
+mutation RenameTeam($newName: String!, $teamID: ID!) {
+  renameTeam(newName: $newName, teamID: $teamID) {
+    id
+    name
+    members {
+      membershipID
+      user {
+        uid
+      }
+      role
+    }
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql

@@ -0,0 +1,14 @@
+mutation UpdateTeamMemberRole(
+  $newRole: TeamMemberRole!,
+  $userUid: ID!,
+  $teamID: ID!
+) {
+  updateTeamMemberRole(
+    newRole: $newRole
+    userUid: $userUid
+    teamID: $teamID
+  ) {
+    membershipID
+    role
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/queries/GetTeam.graphql

@@ -0,0 +1,13 @@
+query GetTeam($teamID: ID!) {
+  team(teamID: $teamID) {
+    id
+    name
+    members {
+      membershipID
+      user {
+        uid
+      }
+      role
+    }
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/queries/Me.graphql

@@ -0,0 +1,8 @@
+query Me {
+  me {
+    uid
+    displayName
+    photoURL
+    eaInvited
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/queries/MyTeams.graphql

@@ -0,0 +1,18 @@
+query MyTeams {
+  myTeams {
+    id
+    name
+    myRole
+    ownersCount
+    members {
+      membershipID
+      user {
+        photoURL
+        displayName
+        email
+        uid
+      }
+      role
+    }
+  }
+}

packages/hoppscotch-app/helpers/backend/mutations/Team.ts

@@ -1,9 +1,28 @@
-import gql from "graphql-tag"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import { runMutation } from "../GQLClient"
 import { TeamName } from "../types/TeamName"
-import { TeamMemberRole } from "../types/TeamMemberRole"
+import {
+  CreateTeamDocument,
+  CreateTeamMutation,
+  CreateTeamMutationVariables,
+  DeleteTeamDocument,
+  DeleteTeamMutation,
+  DeleteTeamMutationVariables,
+  LeaveTeamDocument,
+  LeaveTeamMutation,
+  LeaveTeamMutationVariables,
+  RemoveTeamMemberDocument,
+  RemoveTeamMemberMutation,
+  RemoveTeamMemberMutationVariables,
+  RenameTeamDocument,
+  RenameTeamMutation,
+  RenameTeamMutationVariables,
+  TeamMemberRole,
+  UpdateTeamMemberRoleDocument,
+  UpdateTeamMemberRoleMutation,
+  UpdateTeamMemberRoleMutationVariables,
+} from "../graphql"
 
 type DeleteTeamErrors =
   | "team/not_required_role"
@@ -11,7 +30,7 @@ type DeleteTeamErrors =
   | "team/member_not_found"
   | "ea/not_invite_or_admin"
 
-type ExitTeamErrors =
+type LeaveTeamErrors =
   | "team/invalid_id"
   | "team/member_not_found"
   | "ea/not_invite_or_admin"
@@ -36,48 +55,22 @@ type RemoveTeamMemberErrors =
 export const createTeam = (name: TeamName) =>
   pipe(
     runMutation<
-      {
+      CreateTeamMutation,
-        createTeam: {
+      CreateTeamMutationVariables,
-          id: string
-          name: string
-          members: Array<{ membershipID: string }>
-          myRole: TeamMemberRole
-          ownersCount: number
-          editorsCount: number
-          viewersCount: number
-        }
-      },
       CreateTeamErrors
-    >(
+    >(CreateTeamDocument, {
-      gql`
-        mutation CreateTeam($name: String!) {
-          createTeam(name: $name) {
-            id
-            name
-            members {
-              membershipID
-            }
-            myRole
-            ownersCount
-            editorsCount
-            viewersCount
-          }
-        }
-      `,
-      {
       name,
-      }
+    }),
-    ),
     TE.map(({ createTeam }) => createTeam)
   )
 
 export const deleteTeam = (teamID: string) =>
-  runMutation<void, DeleteTeamErrors>(
+  runMutation<
-    gql`
+    DeleteTeamMutation,
-      mutation DeleteTeam($teamID: ID!) {
+    DeleteTeamMutationVariables,
-        deleteTeam(teamID: $teamID)
+    DeleteTeamErrors
-      }
+  >(
-    `,
+    DeleteTeamDocument,
     {
       teamID,
     },
@@ -87,12 +80,8 @@ export const deleteTeam = (teamID: string) =>
   )
 
 export const leaveTeam = (teamID: string) =>
-  runMutation<void, ExitTeamErrors>(
+  runMutation<LeaveTeamMutation, LeaveTeamMutationVariables, LeaveTeamErrors>(
-    gql`
+    LeaveTeamDocument,
-      mutation ExitTeam($teamID: ID!) {
-        leaveTeam(teamID: $teamID)
-      }
-    `,
     {
       teamID,
     },
@@ -104,27 +93,13 @@ export const leaveTeam = (teamID: string) =>
 export const renameTeam = (teamID: string, newName: TeamName) =>
   pipe(
     runMutation<
-      {
+      RenameTeamMutation,
-        renameTeam: {
+      RenameTeamMutationVariables,
-          id: string
-          name: TeamName
-        }
-      },
       RenameTeamErrors
-    >(
+    >(RenameTeamDocument, {
-      gql`
-        mutation RenameTeam($newName: String!, $teamID: ID!) {
-          renameTeam(newName: $newName, teamID: $teamID) {
-            id
-            name
-          }
-        }
-      `,
-      {
       newName,
       teamID,
-      }
+    }),
-    ),
     TE.map(({ renameTeam }) => renameTeam)
   )
 
@@ -135,48 +110,23 @@ export const updateTeamMemberRole = (
 ) =>
   pipe(
     runMutation<
-      {
+      UpdateTeamMemberRoleMutation,
-        updateTeamMemberRole: {
+      UpdateTeamMemberRoleMutationVariables,
-          membershipID: string
-          role: TeamMemberRole
-        }
-      },
       UpdateTeamMemberRoleErrors
-    >(
+    >(UpdateTeamMemberRoleDocument, {
-      gql`
-          mutation UpdateTeamMemberRole(
-            $newRole: TeamMemberRole!,
-            $userUid: ID!,
-            teamID: ID!
-          ) {
-            updateTeamMemberRole(
-              newRole: $newRole
-              userUid: $userUid
-              teamID: $teamID
-            ) {
-              membershipID
-              role
-            }
-          }
-        `,
-      {
       newRole,
       userUid,
       teamID,
-      }
+    }),
-    ),
     TE.map(({ updateTeamMemberRole }) => updateTeamMemberRole)
   )
 
 export const removeTeamMember = (userUid: string, teamID: string) =>
-  runMutation<void, RemoveTeamMemberErrors>(
+  runMutation<
-    gql`
+    RemoveTeamMemberMutation,
-      mutation RemoveTeamMember($userUid: ID!, $teamID: ID!) {
+    RemoveTeamMemberMutationVariables,
-        removeTeamMember(userUid: $userUid, teamID: $teamID)
+    RemoveTeamMemberErrors
-      }
+  >(RemoveTeamMemberDocument, {
-    `,
-    {
     userUid,
     teamID,
-    }
+  })
-  )

packages/hoppscotch-app/helpers/backend/types/TeamMemberRole.ts

@@ -1 +0,0 @@
-export type TeamMemberRole = "OWNER" | "EDITOR" | "VIEWER"

packages/hoppscotch-app/package.json

@@ -9,8 +9,11 @@
     "pnpm": ">=3"
   },
   "scripts": {
-    "dev": "nuxt",
+    "dev": "pnpx npm-run-all -p -l dev:*",
+    "dev:nuxt": "nuxt",
+    "dev:gql-codegen": "graphql-codegen --config gql-codegen.yml --watch",
     "build": "vue-tsc --noEmit && nuxt build",
+    "postinstall": "pnpm run gql-codegen",
     "start": "nuxt start",
     "generate": "nuxt generate --modern",
     "analyze": "npx nuxt build -a",
@@ -24,7 +27,8 @@
     "do-prod-start": "pnpm run start",
     "do-lint": "pnpm run lint",
     "do-lintfix": "pnpm run lintfix",
-    "do-test": "pnpm run test"
+    "do-test": "pnpm run test",
+    "gql-codegen": "graphql-codegen --config gql-codegen.yml"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
@@ -83,6 +87,13 @@
     "@babel/preset-env": "^7.16.0",
     "@commitlint/cli": "^13.2.1",
     "@commitlint/config-conventional": "^13.2.0",
+    "@graphql-codegen/add": "^3.1.0",
+    "@graphql-codegen/cli": "2.2.0",
+    "@graphql-codegen/typed-document-node": "^2.1.4",
+    "@graphql-codegen/typescript": "2.2.2",
+    "@graphql-codegen/typescript-operations": "^2.1.6",
+    "@graphql-codegen/urql-introspection": "^2.1.0",
+    "@graphql-typed-document-node/core": "^3.1.0",
     "@nuxt/types": "^2.15.8",
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/color-mode": "^2.1.1",
@@ -112,6 +123,7 @@
     "eslint-plugin-vue": "^7.20.0",
     "jest": "^27.3.1",
     "jest-serializer-vue": "^2.0.2",
+    "npm-run-all": "^4.1.5",
     "nuxt-windicss": "^2.0.9",
     "prettier": "^2.4.1",
     "pretty-quick": "^3.1.1",

packages/hoppscotch-app/tsconfig.json

@@ -4,6 +4,7 @@
     "module": "ESNext",
     "moduleResolution": "Node",
     "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
+    "resolveJsonModule": true,
     "esModuleInterop": true,
     "allowJs": true,
     "sourceMap": true,