btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: gql codegen + caching + optimistic

Browse Source
This commit is contained in:
Andrew Bastin
2021-10-08 23:44:23 +05:30
committed by liyasthomas
parent 8d5bd051a1
commit 52539b084d
24 changed files with 1222 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -109,4 +109,4 @@ tests/*/videos
.netlify
# Andrew's crazy Volar shim generator
shims-volar.d.ts
shims-volar.d.ts

3
packages/hoppscotch-app/.eslintrc.js
View File

@@ -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: {

6
packages/hoppscotch-app/.gitignore vendored
View File

@@ -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

2
packages/hoppscotch-app/components/teams/Team.vue
View File

@@ -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: {

50
packages/hoppscotch-app/components/teams/index.vue
View File

@@ -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<
{
myTeams: Array<{
id: string
name: string
myRole: TeamMemberRole
ownersCount: number
members: Array<{
membershipID: string
user: {
photoURL: string | null
displayName: string
email: string
uid: string
}
role: TeamMemberRole
}>
}>
},
MyTeamsQuery,
MyTeamsQueryVariables,
MyTeamsQueryError
>(
gql`
query GetMyTeams {
myTeams {
id
name
myRole
ownersCount
members {
membershipID
user {
photoURL
displayName
email
uid
}
role
}
}
}
`
)
>(MyTeamsDocument)
watchEffect(() => {
console.log(myTeams)

15
packages/hoppscotch-app/gql-codegen.yml Normal file
View File

@@ -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

34
packages/hoppscotch-app/helpers/backend/GQLClient.ts
View File

@@ -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,
MutationFailType extends string = "",
MutationVariables extends {} = {}
DocType,
DocVariables extends object | undefined,
DocErrors extends string
>(
mutation: string | DocumentNode | TypedDocumentNode<any, MutationVariables>,
variables?: MutationVariables,
mutation: TypedDocumentNode<DocType, DocVariables>,
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,
}

4
packages/hoppscotch-app/helpers/backend/caching/keys.ts
View File

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

14
packages/hoppscotch-app/helpers/backend/caching/resolvers.ts Normal file
View File

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

112
packages/hoppscotch-app/helpers/backend/caching/updates.ts
View File

@@ -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 {
myTeams {
id
}
}
`,
query: MyTeamsDocument,
},
(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 {
myTeams {
id
}
}
`,
query: MyTeamsDocument,
},
(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`
{
myTeams {
id
}
}
`,
query: MyTeamsDocument,
},
(data: any) => {
data.myTeams.push(result.createTeam)
@@ -70,77 +52,25 @@ export const updatesDef: Partial<UpdatesConfig> = {
}
)
},
renameTeam: (_result, { teamID, newName }, cache, _info) => {
cache.updateQuery(
{
query: gql`
query GetTeam($teamID: ID!) {
team(teamID: $teamID) {
id
name
}
}
`,
variables: {
teamID,
removeTeamMember: (_result, { teamID, userUid }, cache) => {
const newMembers = (
cache.resolve(
{
__typename: "Team",
id: teamID as string,
},
},
(data: any) => {
data.team.name = newName
return data
}
"members"
) as string[]
)
},
removeTeamMember: (_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.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
}
.map((x) => [x, cache.resolve(x, "user") as string])
.map(([key, userKey]) => [key, cache.resolve(userKey, "uid") as string])
.filter(([_key, uid]) => uid !== userUid)
.map(([key]) => key)
cache.link(
{ __typename: "Team", id: teamID as string },
"members",
newMembers
)
},
},

20
packages/hoppscotch-app/helpers/backend/gql/mutations/CreateTeam.graphql Normal file
View File

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

3
packages/hoppscotch-app/helpers/backend/gql/mutations/DeleteTeam.graphql Normal file
View File

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

3
packages/hoppscotch-app/helpers/backend/gql/mutations/LeaveTeam.graphql Normal file
View File

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

3
packages/hoppscotch-app/helpers/backend/gql/mutations/RemoveTeamMember.graphql Normal file
View File

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

13
packages/hoppscotch-app/helpers/backend/gql/mutations/RenameTeam.graphql Normal file
View File

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

14
packages/hoppscotch-app/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql Normal file
View File

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

13
packages/hoppscotch-app/helpers/backend/gql/queries/GetTeam.graphql Normal file
View File

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

8
packages/hoppscotch-app/helpers/backend/gql/queries/Me.graphql Normal file
View File

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

18
packages/hoppscotch-app/helpers/backend/gql/queries/MyTeams.graphql Normal file
View File

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

162
packages/hoppscotch-app/helpers/backend/mutations/Team.ts
View File

@@ -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<
{
createTeam: {
id: string
name: string
members: Array<{ membershipID: string }>
myRole: TeamMemberRole
ownersCount: number
editorsCount: number
viewersCount: number
}
},
CreateTeamMutation,
CreateTeamMutationVariables,
CreateTeamErrors
>(
gql`
mutation CreateTeam($name: String!) {
createTeam(name: $name) {
id
name
members {
membershipID
}
myRole
ownersCount
editorsCount
viewersCount
}
}
`,
{
name,
}
),
>(CreateTeamDocument, {
name,
}),
TE.map(({ createTeam }) => createTeam)
)
export const deleteTeam = (teamID: string) =>
runMutation<void, DeleteTeamErrors>(
gql`
mutation DeleteTeam($teamID: ID!) {
deleteTeam(teamID: $teamID)
}
`,
runMutation<
DeleteTeamMutation,
DeleteTeamMutationVariables,
DeleteTeamErrors
>(
DeleteTeamDocument,
{
teamID,
},
@@ -87,12 +80,8 @@ export const deleteTeam = (teamID: string) =>
)
export const leaveTeam = (teamID: string) =>
runMutation<void, ExitTeamErrors>(
gql`
mutation ExitTeam($teamID: ID!) {
leaveTeam(teamID: $teamID)
}
`,
runMutation<LeaveTeamMutation, LeaveTeamMutationVariables, LeaveTeamErrors>(
LeaveTeamDocument,
{
teamID,
},
@@ -104,27 +93,13 @@ export const leaveTeam = (teamID: string) =>
export const renameTeam = (teamID: string, newName: TeamName) =>
pipe(
runMutation<
{
renameTeam: {
id: string
name: TeamName
}
},
RenameTeamMutation,
RenameTeamMutationVariables,
RenameTeamErrors
>(
gql`
mutation RenameTeam($newName: String!, $teamID: ID!) {
renameTeam(newName: $newName, teamID: $teamID) {
id
name
}
}
`,
{
newName,
teamID,
}
),
>(RenameTeamDocument, {
newName,
teamID,
}),
TE.map(({ renameTeam }) => renameTeam)
)
@@ -135,48 +110,23 @@ export const updateTeamMemberRole = (
) =>
pipe(
runMutation<
{
updateTeamMemberRole: {
membershipID: string
role: TeamMemberRole
}
},
UpdateTeamMemberRoleMutation,
UpdateTeamMemberRoleMutationVariables,
UpdateTeamMemberRoleErrors
>(
gql`
mutation UpdateTeamMemberRole(
$newRole: TeamMemberRole!,
$userUid: ID!,
teamID: ID!
) {
updateTeamMemberRole(
newRole: $newRole
userUid: $userUid
teamID: $teamID
) {
membershipID
role
}
}
`,
{
newRole,
userUid,
teamID,
}
),
>(UpdateTeamMemberRoleDocument, {
newRole,
userUid,
teamID,
}),
TE.map(({ updateTeamMemberRole }) => updateTeamMemberRole)
)
export const removeTeamMember = (userUid: string, teamID: string) =>
runMutation<void, RemoveTeamMemberErrors>(
gql`
mutation RemoveTeamMember($userUid: ID!, $teamID: ID!) {
removeTeamMember(userUid: $userUid, teamID: $teamID)
}
`,
{
userUid,
teamID,
}
)
runMutation<
RemoveTeamMemberMutation,
RemoveTeamMemberMutationVariables,
RemoveTeamMemberErrors
>(RemoveTeamMemberDocument, {
userUid,
teamID,
})

1
packages/hoppscotch-app/helpers/backend/types/TeamMemberRole.ts
View File

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

16
packages/hoppscotch-app/package.json
View File

@@ -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",

1
packages/hoppscotch-app/tsconfig.json
View File

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

1112
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff