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

refactor: migrate completely to urql

Browse Source
This commit is contained in:
Andrew Bastin
2022-02-02 00:33:34 +05:30
parent eae94e3dbf
commit 2df1c1c6ed
26 changed files with 748 additions and 1677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
packages/hoppscotch-app/helpers/apollo.ts
View File

@@ -1,127 +0,0 @@
import {
ApolloClient,
HttpLink,
InMemoryCache,
QueryOptions,
OperationVariables,
split,
ApolloError,
isApolloError as _isApolloError,
} from "@apollo/client/core"
import { WebSocketLink } from "@apollo/client/link/ws"
import { setContext } from "@apollo/client/link/context"
import { getMainDefinition } from "@apollo/client/utilities"
import { ref, onMounted, onBeforeUnmount, Ref } from "@nuxtjs/composition-api"
import { authIdToken$ } from "./fb/auth"
let authToken: String | null = null
export function registerApolloAuthUpdate() {
authIdToken$.subscribe((token) => {
authToken = token
})
}
/**
* Injects auth token if available
*/
const authLink = setContext((_, { headers }) => {
if (authToken) {
return {
headers: {
...headers,
authorization: `Bearer ${authToken}`,
},
}
} else {
return {
headers,
}
}
})
const httpLink = new HttpLink({
uri:
process.env.CONTEXT === "production"
? "https://api.hoppscotch.io/graphql"
: "https://api.hoppscotch.io/graphql",
})
const wsLink = new WebSocketLink({
uri:
process.env.CONTEXT === "production"
? "wss://api.hoppscotch.io/graphql"
: "wss://api.hoppscotch.io/graphql",
options: {
reconnect: true,
lazy: true,
connectionParams: () => {
return {
authorization: `Bearer ${authToken}`,
}
},
},
})
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query)
return (
definition.kind === "OperationDefinition" &&
definition.operation === "subscription"
)
},
wsLink,
httpLink
)
export const apolloClient = new ApolloClient({
link: authLink.concat(splitLink),
cache: new InMemoryCache(),
defaultOptions: {
query: {
fetchPolicy: "network-only",
errorPolicy: "ignore",
},
watchQuery: {
fetchPolicy: "network-only",
errorPolicy: "ignore",
},
},
})
export function isApolloError(x: any): x is ApolloError {
return _isApolloError(x)
}
export function useGQLQuery<T = any, TVariables = OperationVariables>(
options: QueryOptions<TVariables, T>
): { loading: Ref<boolean>; data: Ref<T | ApolloError | undefined> } {
const loading = ref(true)
const data = ref<T | ApolloError | undefined>()
let subscription: ZenObservable.Subscription | null = null
onMounted(() => {
subscription = apolloClient.watchQuery(options).subscribe((result) => {
if (result.error) {
data.value = result.error
} else {
data.value = result.data
}
loading.value = false
})
})
onBeforeUnmount(() => {
if (subscription) {
subscription.unsubscribe()
}
})
return {
loading,
data,
}
}

11
packages/hoppscotch-app/helpers/backend/gql/mutations/CreateChildCollection.graphql Normal file
View File

@@ -0,0 +1,11 @@
mutation CreateChildCollection(
$childTitle: String!
$collectionID: ID!
) {
createChildCollection(
childTitle: $childTitle
collectionID: $collectionID
) {
id
}
}

5
packages/hoppscotch-app/helpers/backend/gql/mutations/CreateNewRootCollection.graphql Normal file
View File

@@ -0,0 +1,5 @@
mutation CreateNewRootCollection($title: String!, $teamID: ID!) {
createRootCollection(title: $title, teamID: $teamID) {
id
}
}

12
packages/hoppscotch-app/helpers/backend/gql/mutations/CreateRequestInCollection.graphql Normal file
View File

@@ -0,0 +1,12 @@
mutation CreateRequestInCollection($data: CreateTeamRequestInput!, $collectionID: ID!) {
createRequestInCollection(data: $data, collectionID: $collectionID) {
id
collection {
id
team {
id
name
}
}
}
}

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

@@ -0,0 +1,3 @@
mutation DeleteCollection($collectionID: ID!) {
deleteCollection(collectionID: $collectionID)
}

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

@@ -0,0 +1,3 @@
mutation DeleteRequest($requestID: ID!) {
deleteRequest(requestID: $requestID)
}

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

@@ -0,0 +1,3 @@
mutation importFromJSON($jsonString: String!, $teamID: ID!) {
importCollectionsFromJSON(jsonString: $jsonString, teamID: $teamID)
}

5
packages/hoppscotch-app/helpers/backend/gql/mutations/RenameCollection.graphql Normal file
View File

@@ -0,0 +1,5 @@
mutation RenameCollection($newTitle: String!, $collectionID: ID!) {
renameCollection(newTitle: $newTitle, collectionID: $collectionID) {
id
}
}

6
packages/hoppscotch-app/helpers/backend/gql/mutations/UpdateRequest.graphql Normal file
View File

@@ -0,0 +1,6 @@
mutation UpdateRequest($data: UpdateTeamRequestInput!, $requestID: ID!) {
updateRequest(data: $data, requestID: $requestID) {
id
title
}
}

3
packages/hoppscotch-app/helpers/backend/gql/queries/ExportAsJSON.graphql Normal file
View File

@@ -0,0 +1,3 @@
query ExportAsJSON($teamID: ID!) {
exportCollectionsToJSON(teamID: $teamID)
}

7
packages/hoppscotch-app/helpers/backend/gql/queries/GetMyTeams.graphql Normal file
View File

@@ -0,0 +1,7 @@
query GetMyTeams {
myTeams {
id
name
myRole
}
}

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

@@ -0,0 +1,8 @@
query GetUserInfo {
me {
uid
displayName
email
photoURL
}
}

45
packages/hoppscotch-app/helpers/teams/BackendUserInfo.ts
View File

@@ -1,7 +1,9 @@
import { pipe } from "fp-ts/function"
import * as E from "fp-ts/Either"
import { BehaviorSubject } from "rxjs"
import gql from "graphql-tag"
import { authIdToken$ } from "../fb/auth"
import { apolloClient } from "../apollo"
import { runGQLQuery } from "../backend/GQLClient"
import { GetUserInfoDocument } from "../backend/graphql"
/*
* This file deals with interfacing data provided by the
@@ -52,27 +54,22 @@ export function initUserInfo() {
* Runs the actual user info fetching
*/
async function updateUserInfo() {
try {
const { data } = await apolloClient.query({
query: gql`
query GetUserInfo {
me {
uid
displayName
email
photoURL
}
}
`,
})
const result = await runGQLQuery({
query: GetUserInfoDocument,
})
currentUserInfo$.next({
uid: data.me.uid,
displayName: data.me.displayName,
email: data.me.email,
photoURL: data.me.photoURL,
})
} catch (e) {
currentUserInfo$.next(null)
}
currentUserInfo$.next(
pipe(
result,
E.matchW(
() => null,
(x) => ({
uid: x.me.uid,
displayName: x.me.displayName ?? null,
email: x.me.email ?? null,
photoURL: x.me.photoURL ?? null,
})
)
)
)
}

150
packages/hoppscotch-app/helpers/teams/TeamMemberAdapter.ts
View File

@@ -1,150 +0,0 @@
import * as E from "fp-ts/Either"
import { BehaviorSubject, Subscription } from "rxjs"
import cloneDeep from "lodash/cloneDeep"
import { runGQLQuery, runGQLSubscription } from "../backend/GQLClient"
import {
GetTeamMembersDocument,
TeamMemberAddedDocument,
TeamMemberRemovedDocument,
TeamMemberUpdatedDocument,
} from "../backend/graphql"
export interface TeamsTeamMember {
membershipID: string
user: {
uid: string
email: string | null
}
role: "OWNER" | "EDITOR" | "VIEWER"
}
export default class TeamMemberAdapter {
members$: BehaviorSubject<TeamsTeamMember[]>
private teamMemberAdded$: Subscription | null
private teamMemberRemoved$: Subscription | null
private teamMemberUpdated$: Subscription | null
constructor(private teamID: string | null) {
this.members$ = new BehaviorSubject<TeamsTeamMember[]>([])
this.teamMemberAdded$ = null
this.teamMemberUpdated$ = null
this.teamMemberRemoved$ = null
if (this.teamID) this.initialize()
}
changeTeamID(newTeamID: string | null) {
this.members$.next([])
this.teamID = newTeamID
if (this.teamID) this.initialize()
}
unsubscribeSubscriptions() {
this.teamMemberAdded$?.unsubscribe()
this.teamMemberRemoved$?.unsubscribe()
this.teamMemberUpdated$?.unsubscribe()
}
private async initialize() {
await this.loadTeamMembers()
this.registerSubscriptions()
}
private async loadTeamMembers(): Promise<void> {
if (!this.teamID) return
const result: TeamsTeamMember[] = []
let cursor: string | null = null
while (true) {
const res = await runGQLQuery({
query: GetTeamMembersDocument,
variables: {
teamID: this.teamID,
cursor,
},
})
if (E.isLeft(res))
throw new Error(`Team Members List Load failed: ${res.left}`)
// TODO: Improve this with TypeScript
result.push(...(res.right.team!.members as any))
if ((res.right.team!.members as any[]).length === 0) break
else {
cursor =
res.right.team!.members[res.right.team!.members.length - 1]
.membershipID
}
}
this.members$.next(result)
}
private registerSubscriptions() {
if (!this.teamID) return
this.teamMemberAdded$ = runGQLSubscription({
query: TeamMemberAddedDocument,
variables: {
teamID: this.teamID,
},
}).subscribe((result) => {
if (E.isLeft(result))
throw new Error(`Team Member Added Subscription Failed: ${result.left}`)
// TODO: Improve typing
this.members$.next([
...(this.members$.value as any),
result.right.teamMemberAdded as any,
])
})
this.teamMemberRemoved$ = runGQLSubscription({
query: TeamMemberRemovedDocument,
variables: {
teamID: this.teamID,
},
}).subscribe((result) => {
if (E.isLeft(result))
throw new Error(
`Team Member Removed Subscription Failed: ${result.left}`
)
this.members$.next(
this.members$.value.filter(
(el) => el.user.uid !== result.right.teamMemberRemoved
)
)
})
this.teamMemberUpdated$ = runGQLSubscription({
query: TeamMemberUpdatedDocument,
variables: {
teamID: this.teamID,
},
}).subscribe((result) => {
if (E.isLeft(result))
throw new Error(
`Team Member Updated Subscription Failed: ${result.left}`
)
const list = cloneDeep(this.members$.value)
// TODO: Improve typing situation
const obj = list.find(
(el) =>
el.user.uid === (result.right.teamMemberUpdated.user!.uid as any)
)
if (!obj) return
Object.assign(obj, result.right.teamMemberUpdated)
})
}
}

573
packages/hoppscotch-app/helpers/teams/utils.js
View File

@@ -1,573 +0,0 @@
import gql from "graphql-tag"
import { BehaviorSubject } from "rxjs"
/**
* Returns an observable list of team members in the given Team
*
* @param {ApolloClient<any>} apollo - Instance of ApolloClient
* @param {string} teamID - ID of the team to observe
*
* @returns {{user: {uid: string, email: string}, role: 'OWNER' | 'EDITOR' | 'VIEWER'}}
*/
export async function getLiveTeamMembersList(apollo, teamID) {
const subject = new BehaviorSubject([])
const { data } = await apollo.query({
query: gql`
query GetTeamMembers($teamID: ID!) {
team(teamID: $teamID) {
members {
user {
uid
email
}
role
}
}
}
`,
variables: {
teamID,
},
})
subject.next(data.team.members)
const addedSub = apollo
.subscribe({
query: gql`
subscription TeamMemberAdded($teamID: ID!) {
teamMemberAdded(teamID: $teamID) {
user {
uid
email
}
role
}
}
`,
variables: {
teamID,
},
})
.subscribe(({ data }) => {
subject.next([...subject.value, data.teamMemberAdded])
})
const updateSub = apollo
.subscribe({
query: gql`
subscription TeamMemberUpdated($teamID: ID!) {
teamMemberUpdated(teamID: $teamID) {
user {
uid
email
}
role
}
}
`,
variables: {
teamID,
},
})
.subscribe(({ data }) => {
const val = subject.value.find(
(member) => member.user.uid === data.teamMemberUpdated.user.uid
)
if (!val) return
Object.assign(val, data.teamMemberUpdated)
})
const removeSub = apollo
.subscribe({
query: gql`
subscription TeamMemberRemoved($teamID: ID!) {
teamMemberRemoved(teamID: $teamID)
}
`,
variables: {
teamID,
},
})
.subscribe(({ data }) => {
subject.next(
subject.value.filter(
(member) => member.user.uid !== data.teamMemberAdded.user.uid
)
)
})
const mainSub = subject.subscribe({
complete() {
addedSub.unsubscribe()
updateSub.unsubscribe()
removeSub.unsubscribe()
mainSub.unsubscribe()
},
})
return subject
}
export function createTeam(apollo, name) {
return apollo.mutate({
mutation: gql`
mutation ($name: String!) {
createTeam(name: $name) {
name
}
}
`,
variables: {
name,
},
})
}
export function addTeamMemberByEmail(apollo, userRole, userEmail, teamID) {
return apollo.mutate({
mutation: gql`
mutation addTeamMemberByEmail(
$userRole: TeamMemberRole!
$userEmail: String!
$teamID: ID!
) {
addTeamMemberByEmail(
userRole: $userRole
userEmail: $userEmail
teamID: $teamID
) {
role
}
}
`,
variables: {
userRole,
userEmail,
teamID,
},
})
}
export function updateTeamMemberRole(apollo, userID, newRole, teamID) {
return apollo.mutate({
mutation: gql`
mutation updateTeamMemberRole(
$newRole: TeamMemberRole!
$userUid: ID!
$teamID: ID!
) {
updateTeamMemberRole(
newRole: $newRole
userUid: $userUid
teamID: $teamID
) {
role
}
}
`,
variables: {
newRole,
userUid: userID,
teamID,
},
})
}
export function renameTeam(apollo, name, teamID) {
return apollo.mutate({
mutation: gql`
mutation renameTeam($newName: String!, $teamID: ID!) {
renameTeam(newName: $newName, teamID: $teamID) {
id
}
}
`,
variables: {
newName: name,
teamID,
},
})
}
export function removeTeamMember(apollo, userID, teamID) {
return apollo.mutate({
mutation: gql`
mutation removeTeamMember($userUid: ID!, $teamID: ID!) {
removeTeamMember(userUid: $userUid, teamID: $teamID)
}
`,
variables: {
userUid: userID,
teamID,
},
})
}
export async function deleteTeam(apollo, teamID) {
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation ($teamID: ID!) {
deleteTeam(teamID: $teamID)
}
`,
variables: {
teamID,
},
})
if (response !== undefined) break
}
return response
}
export function exitTeam(apollo, teamID) {
return apollo.mutate({
mutation: gql`
mutation ($teamID: ID!) {
leaveTeam(teamID: $teamID)
}
`,
variables: {
teamID,
},
})
}
export async function rootCollectionsOfTeam(apollo, teamID) {
const collections = []
let cursor = ""
while (true) {
const response = await apollo.query({
query: gql`
query rootCollectionsOfTeam($teamID: ID!, $cursor: ID!) {
rootCollectionsOfTeam(teamID: $teamID, cursor: $cursor) {
id
title
}
}
`,
variables: {
teamID,
cursor,
},
fetchPolicy: "no-cache",
})
if (response.data.rootCollectionsOfTeam.length === 0) break
response.data.rootCollectionsOfTeam.forEach((collection) => {
collections.push(collection)
})
cursor = collections[collections.length - 1].id
}
return collections
}
export async function getCollectionChildren(apollo, collectionID) {
const children = []
const response = await apollo.query({
query: gql`
query getCollectionChildren($collectionID: ID!) {
collection(collectionID: $collectionID) {
children {
id
title
}
}
}
`,
variables: {
collectionID,
},
fetchPolicy: "no-cache",
})
response.data.collection.children.forEach((child) => {
children.push(child)
})
return children
}
export async function getCollectionRequests(apollo, collectionID) {
const requests = []
let cursor = ""
while (true) {
const response = await apollo.query({
query: gql`
query getCollectionRequests($collectionID: ID!, $cursor: ID) {
requestsInCollection(collectionID: $collectionID, cursor: $cursor) {
id
title
request
}
}
`,
variables: {
collectionID,
cursor,
},
fetchPolicy: "no-cache",
})
response.data.requestsInCollection.forEach((request) => {
requests.push(request)
})
if (response.data.requestsInCollection.length < 10) {
break
}
cursor = requests[requests.length - 1].id
}
return requests
}
export async function renameCollection(apollo, title, id) {
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation ($newTitle: String!, $collectionID: ID!) {
renameCollection(newTitle: $newTitle, collectionID: $collectionID) {
id
}
}
`,
variables: {
newTitle: title,
collectionID: id,
},
})
if (response !== undefined) break
}
return response
}
export async function updateRequest(apollo, request, requestName, requestID) {
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation ($data: UpdateTeamRequestInput!, $requestID: ID!) {
updateRequest(data: $data, requestID: $requestID) {
id
}
}
`,
variables: {
data: {
request: JSON.stringify(request),
title: requestName,
},
requestID,
},
})
if (response !== undefined) break
}
return response
}
export async function addChildCollection(apollo, title, id) {
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation ($childTitle: String!, $collectionID: ID!) {
createChildCollection(
childTitle: $childTitle
collectionID: $collectionID
) {
id
}
}
`,
variables: {
childTitle: title,
collectionID: id,
},
})
if (response !== undefined) break
}
return response
}
export async function deleteCollection(apollo, id) {
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation ($collectionID: ID!) {
deleteCollection(collectionID: $collectionID)
}
`,
variables: {
collectionID: id,
},
})
if (response !== undefined) break
}
return response
}
export async function deleteRequest(apollo, requestID) {
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation ($requestID: ID!) {
deleteRequest(requestID: $requestID)
}
`,
variables: {
requestID,
},
})
if (response !== undefined) break
}
return response
}
export async function createNewRootCollection(apollo, title, id) {
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation ($title: String!, $teamID: ID!) {
createRootCollection(title: $title, teamID: $teamID) {
id
}
}
`,
variables: {
title,
teamID: id,
},
})
if (response !== undefined) break
}
return response
}
export async function saveRequestAsTeams(
apollo,
request,
title,
teamID,
collectionID
) {
const x = await apollo.mutate({
mutation: gql`
mutation ($data: CreateTeamRequestInput!, $collectionID: ID!) {
createRequestInCollection(data: $data, collectionID: $collectionID) {
id
collection {
id
team {
id
name
}
}
}
}
`,
variables: {
collectionID,
data: {
teamID,
title,
request,
},
},
})
return x.data?.createRequestInCollection
}
export async function overwriteRequestTeams(apollo, request, title, requestID) {
await apollo.mutate({
mutation: gql`
mutation updateRequest($data: UpdateTeamRequestInput!, $requestID: ID!) {
updateRequest(data: $data, requestID: $requestID) {
id
title
}
}
`,
variables: {
requestID,
data: {
request,
title,
},
},
})
}
export async function importFromMyCollections(apollo, collectionID, teamID) {
const response = await apollo.mutate({
mutation: gql`
mutation importFromMyCollections(
$fbCollectionPath: String!
$teamID: ID!
) {
importCollectionFromUserFirestore(
fbCollectionPath: $fbCollectionPath
teamID: $teamID
) {
id
title
}
}
`,
variables: {
fbCollectionPath: collectionID,
teamID,
},
})
return response.data != null
}
export async function importFromJSON(apollo, collections, teamID) {
const response = await apollo.mutate({
mutation: gql`
mutation importFromJSON($jsonString: String!, $teamID: ID!) {
importCollectionsFromJSON(jsonString: $jsonString, teamID: $teamID)
}
`,
variables: {
jsonString: JSON.stringify(collections),
teamID,
},
})
return response.data != null
}
export async function replaceWithJSON(apollo, collections, teamID) {
const response = await apollo.mutate({
mutation: gql`
mutation replaceWithJSON($jsonString: String!, $teamID: ID!) {
replaceCollectionsWithJSON(jsonString: $jsonString, teamID: $teamID)
}
`,
variables: {
jsonString: JSON.stringify(collections),
teamID,
},
})
return response.data != null
}
export async function exportAsJSON(apollo, teamID) {
const response = await apollo.query({
query: gql`
query exportAsJSON($teamID: ID!) {
exportCollectionsToJSON(teamID: $teamID)
}
`,
variables: {
teamID,
},
})
return response.data.exportCollectionsToJSON
}