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

refactor: add graphcache codegen and update types

Browse Source
This commit is contained in:
Andrew Bastin
2021-10-15 18:00:18 +05:30
parent 02d5f0fdf3
commit 39de34f083
7 changed files with 107 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/hoppscotch-app/gql-codegen.yml
View File

@@ -9,6 +9,7 @@ generates:
- typescript
- typescript-operations
- typed-document-node
- typescript-urql-graphcache
helpers/backend/backend-schema.json:
plugins:

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

@@ -102,13 +102,13 @@ const client = createClient({
*/
export type GQLError<T extends string> =
| {
type: "network_error"
error: Error
}
type: "network_error"
error: Error
}
| {
type: "gql_error"
error: T
}
type: "gql_error"
error: T
}
const DEFAULT_QUERY_OPTIONS = {
noPolling: false,
@@ -124,10 +124,10 @@ type UseQueryLoading = {
type UseQueryLoaded<
QueryFailType extends string = "",
QueryReturnType = any
> = {
loading: false
data: E.Either<GQLError<QueryFailType>, QueryReturnType>
}
> = {
loading: false
data: E.Either<GQLError<QueryFailType>, QueryReturnType>
}
type UseQueryReturn<QueryFailType extends string = "", QueryReturnType = any> =
| UseQueryLoading
@@ -218,9 +218,9 @@ export function useGQLQuery<
data: data!,
}) as
| {
loading: false
data: DataType
}
loading: false
data: DataType
}
| { loading: true }
}
@@ -259,7 +259,7 @@ export const runMutation = <
type: "gql_error",
error: gqlErr,
},
// The right case (it was a GraphQL Error)
// The right case (it was a network error)
(networkErr) =>
<GQLError<DocErrors>>{
type: "network_error",

5
packages/hoppscotch-app/helpers/backend/caching/optimistic.ts
View File

@@ -1,6 +1,6 @@
import { OptimisticMutationConfig } from "@urql/exchange-graphcache"
import { GraphCacheOptimisticUpdaters } from "../graphql"
export const optimisticDefs: OptimisticMutationConfig = {
export const optimisticDefs: GraphCacheOptimisticUpdaters = {
deleteTeam: () => true,
leaveTeam: () => true,
renameTeam: ({ teamID, newName }) => ({
@@ -9,5 +9,4 @@ export const optimisticDefs: OptimisticMutationConfig = {
name: newName,
}),
removeTeamMember: () => true,
// TODO: updateTeamMemberRole
}

8
packages/hoppscotch-app/helpers/backend/caching/resolvers.ts
View File

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

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

@@ -1,17 +1,18 @@
import { UpdatesConfig } from "@urql/exchange-graphcache"
import { MyTeamsDocument } from "../graphql"
import { GraphCacheUpdaters, MyTeamsDocument } from "../graphql"
export const updatesDef: Partial<UpdatesConfig> = {
export const updatesDef: GraphCacheUpdaters = {
Mutation: {
deleteTeam: (_r, { teamID }, cache, _info) => {
cache.updateQuery(
{
query: MyTeamsDocument,
},
(data: any) => {
data.myTeams = (data as any).myTeams.filter(
(x: any) => x.id !== teamID
)
(data) => {
if (data) {
data.myTeams = data.myTeams.filter(
(x) => x.id !== teamID
)
}
return data
}
@@ -19,7 +20,7 @@ export const updatesDef: Partial<UpdatesConfig> = {
cache.invalidate({
__typename: "Team",
id: teamID as any,
id: teamID
})
},
leaveTeam: (_r, { teamID }, cache, _info) => {
@@ -27,10 +28,12 @@ export const updatesDef: Partial<UpdatesConfig> = {
{
query: MyTeamsDocument,
},
(data: any) => {
data.myTeams = (data as any).myTeams.filter(
(x: any) => x.id !== teamID
)
(data) => {
if (data) {
data.myTeams = data.myTeams.filter(
(x) => x.id !== teamID
)
}
return data
}
@@ -38,7 +41,7 @@ export const updatesDef: Partial<UpdatesConfig> = {
cache.invalidate({
__typename: "Team",
id: teamID as any,
id: teamID
})
},
createTeam: (result, _args, cache, _info) => {
@@ -46,8 +49,8 @@ export const updatesDef: Partial<UpdatesConfig> = {
{
query: MyTeamsDocument,
},
(data: any) => {
data.myTeams.push(result.createTeam)
(data) => {
if (data) data.myTeams.push(result.createTeam as any)
return data
}
)
@@ -57,7 +60,7 @@ export const updatesDef: Partial<UpdatesConfig> = {
cache.resolve(
{
__typename: "Team",
id: teamID as string,
id: teamID,
},
"members"
) as string[]
@@ -68,7 +71,7 @@ export const updatesDef: Partial<UpdatesConfig> = {
.map(([key]) => key)
cache.link(
{ __typename: "Team", id: teamID as string },
{ __typename: "Team", id: teamID },
"members",
newMembers
)

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

@@ -80,7 +80,7 @@
"yargs-parser": "^20.2.9"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/core": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@commitlint/cli": "^13.2.1",
"@commitlint/config-conventional": "^13.2.0",
@@ -89,6 +89,7 @@
"@graphql-codegen/typed-document-node": "^2.1.4",
"@graphql-codegen/typescript": "2.2.2",
"@graphql-codegen/typescript-operations": "^2.1.6",
"@graphql-codegen/typescript-urql-graphcache": "^2.1.6",
"@graphql-codegen/urql-introspection": "^2.1.0",
"@graphql-typed-document-node/core": "^3.1.0",
"@nuxt/types": "^2.15.8",

64
pnpm-lock.yaml generated
View File

@@ -27,6 +27,7 @@ importers:
'@graphql-codegen/typed-document-node': ^2.1.4
'@graphql-codegen/typescript': 2.2.2
'@graphql-codegen/typescript-operations': ^2.1.6
'@graphql-codegen/typescript-urql-graphcache': ^2.1.6
'@graphql-codegen/urql-introspection': ^2.1.0
'@graphql-typed-document-node/core': ^3.1.0
'@hoppscotch/js-sandbox': workspace:^1.0.0
@@ -177,6 +178,7 @@ importers:
'@graphql-codegen/typed-document-node': 2.1.4_graphql@15.6.1
'@graphql-codegen/typescript': 2.2.2_graphql@15.6.1
'@graphql-codegen/typescript-operations': 2.1.6_graphql@15.6.1
'@graphql-codegen/typescript-urql-graphcache': 2.1.6_40426d2202828b1968a1d5d1a08b3434
'@graphql-codegen/urql-introspection': 2.1.0_graphql@15.6.1
'@graphql-typed-document-node/core': 3.1.0_graphql@15.6.1
'@nuxt/types': 2.15.8_sass@1.42.1
@@ -2406,6 +2408,20 @@ packages:
tslib: 2.3.1
dev: true
/@graphql-codegen/plugin-helpers/2.2.0_graphql@15.6.1:
resolution: {integrity: sha512-7t3LFd6DHUWPh0f7qY7wde2r4KCsU8WDcTxQ0QuHuokTqZYnRk+UH3xNDUiyb+1LGTBUqIaKxLwQXh8EDyZK7A==}
peerDependencies:
graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
dependencies:
'@graphql-tools/utils': 8.3.0_graphql@15.6.1
change-case-all: 1.0.14
common-tags: 1.8.0
graphql: 15.6.1
import-from: 4.0.0
lodash: 4.17.21
tslib: 2.3.1
dev: true
/@graphql-codegen/typed-document-node/2.1.4_graphql@15.6.1:
resolution: {integrity: sha512-TP8jbppssZLBL7HgV/AQg2yVL6FP5qNjWpo+S45n0FNutFQvtSUrCe5Ji6+xFUHDoRBbeWIXeQPJPjURjlIbfA==}
peerDependencies:
@@ -2436,6 +2452,25 @@ packages:
- supports-color
dev: true
/@graphql-codegen/typescript-urql-graphcache/2.1.6_40426d2202828b1968a1d5d1a08b3434:
resolution: {integrity: sha512-PlLIOnEWg2ItMztfBkJpvFs9HJzk0yYvc1AwzrVnff82eLLjFZsnxRUTMHSICCU9oFGdvAElHqxyO4fSdvaurg==}
peerDependencies:
'@urql/exchange-graphcache': ^4.1.1
graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
graphql-tag: ^2.0.0
dependencies:
'@graphql-codegen/plugin-helpers': 2.2.0_graphql@15.6.1
'@graphql-codegen/visitor-plugin-common': 2.4.0_graphql@15.6.1
'@urql/exchange-graphcache': 4.3.5_graphql@15.6.1
auto-bind: 4.0.0
change-case-all: 1.0.14
graphql: 15.6.1
graphql-tag: 2.12.5_graphql@15.6.1
tslib: 2.3.1
transitivePeerDependencies:
- supports-color
dev: true
/@graphql-codegen/typescript/2.2.2_graphql@15.6.1:
resolution: {integrity: sha512-prcB4nNi2iQzZRLla6N6kEPmnE2WU1zz5+sEBcZcqphjWERqQ3zwdSKsuLorE/XxMp500p6BQ96cVo+bFkmVtA==}
peerDependencies:
@@ -2481,6 +2516,26 @@ packages:
- supports-color
dev: true
/@graphql-codegen/visitor-plugin-common/2.4.0_graphql@15.6.1:
resolution: {integrity: sha512-wcUqpbvhLlOwsriyI+ZTuE0Fx7AIIbcL80+KjgNGrMjLZJLTyMJGpYwc87I876EPIcyC35+LO15nwy2cR2tbxQ==}
peerDependencies:
graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
dependencies:
'@graphql-codegen/plugin-helpers': 2.2.0_graphql@15.6.1
'@graphql-tools/optimize': 1.1.0_graphql@15.6.1
'@graphql-tools/relay-operation-optimizer': 6.4.0_graphql@15.6.1
'@graphql-tools/utils': 8.3.0_graphql@15.6.1
auto-bind: 4.0.0
change-case-all: 1.0.14
dependency-graph: 0.11.0
graphql: 15.6.1
graphql-tag: 2.12.5_graphql@15.6.1
parse-filepath: 1.0.2
tslib: 2.3.1
transitivePeerDependencies:
- supports-color
dev: true
/@graphql-tools/apollo-engine-loader/7.1.0_graphql@15.6.1:
resolution: {integrity: sha512-JKK34xQiB1l2sBfi8G5c1HZZkleQbwOlLAkySycKTrU+VMzu5lEjhzYwowIbLLjTthjUHQkRFANHkxvB42t5SQ==}
peerDependencies:
@@ -3066,6 +3121,15 @@ packages:
graphql: 15.6.1
tslib: 2.3.1
/@graphql-tools/utils/8.3.0_graphql@15.6.1:
resolution: {integrity: sha512-ksE0RxS0AFllo6KIJjvQsRgcUAzoyZUgUrDbCngv4SaQwyX9YxTfddTLN4uQmbiZB9h25fPp/Xgeyaa3ARCzgg==}
peerDependencies:
graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
dependencies:
graphql: 15.6.1
tslib: 2.3.1
dev: true
/@graphql-tools/wrap/6.2.4_graphql@15.6.1:
resolution: {integrity: sha512-cyQgpybolF9DjL2QNOvTS1WDCT/epgYoiA8/8b3nwv5xmMBQ6/6nYnZwityCZ7njb7MMyk7HBEDNNlP9qNJDcA==}
peerDependencies: