From 63494e9d04a5a7a81c25e025706af61ed79286e9 Mon Sep 17 00:00:00 2001 From: Igor Lobanov Date: Sat, 16 Dec 2023 14:57:08 +0100 Subject: [PATCH] publicGraphQLClient, privateGraphQLClient -> graphQLClient (#336) * publicGraphQLClient, privateGraphQLClient -> graphQLClient * ssr fix --------- Co-authored-by: Igor Lobanov --- src/context/session.tsx | 2 +- ...ivateGraphQLClient.ts => graphQLClient.ts} | 17 ++-- src/graphql/publicGraphQLClient.ts | 20 ---- src/utils/apiClient.ts | 95 +++++++++---------- 4 files changed, 58 insertions(+), 76 deletions(-) rename src/graphql/{privateGraphQLClient.ts => graphQLClient.ts} (79%) delete mode 100644 src/graphql/publicGraphQLClient.ts diff --git a/src/context/session.tsx b/src/context/session.tsx index 0be22560..be7c7e03 100644 --- a/src/context/session.tsx +++ b/src/context/session.tsx @@ -12,7 +12,7 @@ import { useContext, } from 'solid-js' -import { resetToken, setToken } from '../graphql/privateGraphQLClient' +import { resetToken, setToken } from '../graphql/graphQLClient' import { showModal } from '../stores/ui' import { apiClient } from '../utils/apiClient' diff --git a/src/graphql/privateGraphQLClient.ts b/src/graphql/graphQLClient.ts similarity index 79% rename from src/graphql/privateGraphQLClient.ts rename to src/graphql/graphQLClient.ts index 38da3a31..cb5eaa3b 100644 --- a/src/graphql/privateGraphQLClient.ts +++ b/src/graphql/graphQLClient.ts @@ -1,23 +1,24 @@ import { ClientOptions, dedupExchange, fetchExchange, Exchange, createClient } from '@urql/core' import { devtoolsExchange } from '@urql/devtools' +import { isServer } from 'solid-js/web' import { isDev, apiBaseUrl } from '../utils/config' -const TOKEN_LOCAL_STORAGE_KEY = 'token' - const exchanges: Exchange[] = [dedupExchange, fetchExchange] if (isDev) { exchanges.unshift(devtoolsExchange) } +const TOKEN_LOCAL_STORAGE_KEY = 'token' + export const getToken = (): string => { return localStorage.getItem(TOKEN_LOCAL_STORAGE_KEY) } export const setToken = (token: string) => { if (!token) { - console.error('[privateGraphQLClient] setToken: token is null!') + console.error('[graphQLClient] setToken: token is null!') } localStorage.setItem(TOKEN_LOCAL_STORAGE_KEY, token) @@ -32,16 +33,20 @@ const options: ClientOptions = { maskTypename: true, requestPolicy: 'cache-and-network', fetchOptions: () => { + if (isServer) { + return {} + } // localStorage is the source of truth for now // to change token call setToken, for example after login - const token = localStorage.getItem(TOKEN_LOCAL_STORAGE_KEY) + const token = getToken() if (!token) { - console.error('[privateGraphQLClient] fetchOptions: token is null!') + return {} } + const headers = { Authorization: token } return { headers } }, exchanges, } -export const privateGraphQLClient = createClient(options) +export const graphQLClient = createClient(options) diff --git a/src/graphql/publicGraphQLClient.ts b/src/graphql/publicGraphQLClient.ts deleted file mode 100644 index ce58878a..00000000 --- a/src/graphql/publicGraphQLClient.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { ClientOptions, dedupExchange, fetchExchange, Exchange, createClient } from '@urql/core' -import { devtoolsExchange } from '@urql/devtools' - -import { isDev, apiBaseUrl } from '../utils/config' -// import { cache } from './cache' - -const exchanges: Exchange[] = [dedupExchange, fetchExchange] //, cache] - -if (isDev) { - exchanges.unshift(devtoolsExchange) -} - -const options: ClientOptions = { - url: apiBaseUrl, - maskTypename: true, - requestPolicy: 'cache-and-network', - exchanges, -} - -export const publicGraphQLClient = createClient(options) diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts index ee966de1..01430f7b 100644 --- a/src/utils/apiClient.ts +++ b/src/utils/apiClient.ts @@ -22,6 +22,7 @@ import type { LoadRandomTopShoutsParams, } from '../graphql/types.gen' +import { getToken, graphQLClient } from '../graphql/graphQLClient' import createArticle from '../graphql/mutation/article-create' import deleteShout from '../graphql/mutation/article-delete' import updateArticle from '../graphql/mutation/article-update' @@ -40,8 +41,6 @@ import reactionDestroy from '../graphql/mutation/reaction-destroy' import reactionUpdate from '../graphql/mutation/reaction-update' import unfollowMutation from '../graphql/mutation/unfollow' import updateProfile from '../graphql/mutation/update-profile' -import { getToken, privateGraphQLClient } from '../graphql/privateGraphQLClient' -import { publicGraphQLClient } from '../graphql/publicGraphQLClient' import shoutLoad from '../graphql/query/article-load' import shoutsLoadBy from '../graphql/query/articles-load-by' import articlesLoadRandomTop from '../graphql/query/articles-load-random-top' @@ -86,7 +85,7 @@ export class ApiError extends Error { export const apiClient = { authLogin: async ({ email, password }: { email: string; password: string }): Promise => { - const response = await publicGraphQLClient.query(authLoginQuery, { email, password }).toPromise() + const response = await graphQLClient.query(authLoginQuery, { email, password }).toPromise() // console.debug('[api-client] authLogin', { response }) if (response.error) { if ( @@ -118,7 +117,7 @@ export const apiClient = { password: string name: string }): Promise => { - const response = await publicGraphQLClient + const response = await graphQLClient .mutation(authRegisterMutation, { email, password, name }) .toPromise() @@ -131,17 +130,17 @@ export const apiClient = { } }, authSignOut: async () => { - const response = await publicGraphQLClient.query(authLogoutQuery, {}).toPromise() + const response = await graphQLClient.query(authLogoutQuery, {}).toPromise() return response.data.signOut }, authCheckEmail: async ({ email }) => { // check if email is used - const response = await publicGraphQLClient.query(authCheckEmailQuery, { email }).toPromise() + const response = await graphQLClient.query(authCheckEmailQuery, { email }).toPromise() return response.data.isEmailUsed }, authSendLink: async ({ email, lang, template }) => { // send link with code on email - const response = await publicGraphQLClient + const response = await graphQLClient .mutation(authSendLinkMutation, { email, lang, template }) .toPromise() @@ -161,7 +160,7 @@ export const apiClient = { }, confirmEmail: async ({ token }: { token: string }) => { // confirm email with code from link - const response = await publicGraphQLClient.mutation(authConfirmEmailMutation, { token }).toPromise() + const response = await graphQLClient.mutation(authConfirmEmailMutation, { token }).toPromise() if (response.error) { // TODO: better error communication if (response.error.message === '[GraphQL] check token lifetime') { @@ -183,7 +182,7 @@ export const apiClient = { }, getRandomTopics: async ({ amount }: { amount: number }) => { - const response = await publicGraphQLClient.query(topicsRandomQuery, { amount }).toPromise() + const response = await graphQLClient.query(topicsRandomQuery, { amount }).toPromise() if (!response.data) { console.error('[api-client] getRandomTopics', response.error) @@ -195,11 +194,11 @@ export const apiClient = { // subscribe follow: async ({ what, slug }: { what: FollowingEntity; slug: string }) => { - const response = await privateGraphQLClient.mutation(followMutation, { what, slug }).toPromise() + const response = await graphQLClient.mutation(followMutation, { what, slug }).toPromise() return response.data.follow }, unfollow: async ({ what, slug }: { what: FollowingEntity; slug: string }) => { - const response = await privateGraphQLClient.mutation(unfollowMutation, { what, slug }).toPromise() + const response = await graphQLClient.mutation(unfollowMutation, { what, slug }).toPromise() return response.data.unfollow }, @@ -209,7 +208,7 @@ export const apiClient = { } // renew session with auth token in header (!) - const response = await privateGraphQLClient.mutation(mySession, {}).toPromise() + const response = await graphQLClient.mutation(mySession, {}).toPromise() if (response.error) { throw new ApiError('unknown', response.error.message) @@ -222,37 +221,37 @@ export const apiClient = { return response.data.getSession }, getAllTopics: async () => { - const response = await publicGraphQLClient.query(topicsAll, {}).toPromise() + const response = await graphQLClient.query(topicsAll, {}).toPromise() if (response.error) { console.debug('[api-client] getAllTopics', response.error) } return response.data.topicsAll }, getAllAuthors: async () => { - const response = await publicGraphQLClient.query(authorsAll, {}).toPromise() + const response = await graphQLClient.query(authorsAll, {}).toPromise() if (response.error) { console.debug('[api-client] getAllAuthors', response.error) } return response.data.authorsAll }, getAuthor: async ({ slug }: { slug: string }): Promise => { - const response = await publicGraphQLClient.query(authorBySlug, { slug }).toPromise() + const response = await graphQLClient.query(authorBySlug, { slug }).toPromise() return response.data.getAuthor }, getAuthorFollowers: async ({ slug }: { slug: string }): Promise => { - const response = await publicGraphQLClient.query(userSubscribers, { slug }).toPromise() + const response = await graphQLClient.query(userSubscribers, { slug }).toPromise() return response.data.userFollowers }, getAuthorFollowingUsers: async ({ slug }: { slug: string }): Promise => { - const response = await publicGraphQLClient.query(userFollowedAuthors, { slug }).toPromise() + const response = await graphQLClient.query(userFollowedAuthors, { slug }).toPromise() return response.data.userFollowedAuthors }, getAuthorFollowingTopics: async ({ slug }: { slug: string }): Promise => { - const response = await publicGraphQLClient.query(userFollowedTopics, { slug }).toPromise() + const response = await graphQLClient.query(userFollowedTopics, { slug }).toPromise() return response.data.userFollowedTopics }, updateProfile: async (input: ProfileInput) => { - const response = await privateGraphQLClient.mutation(updateProfile, { profile: input }).toPromise() + const response = await graphQLClient.mutation(updateProfile, { profile: input }).toPromise() if (response.error) { if ( response.error.message.includes('duplicate key value violates unique constraint "user_slug_key"') @@ -265,11 +264,11 @@ export const apiClient = { return response.data.updateProfile }, getTopic: async ({ slug }: { slug: string }): Promise => { - const response = await publicGraphQLClient.query(topicBySlug, { slug }).toPromise() + const response = await graphQLClient.query(topicBySlug, { slug }).toPromise() return response.data.getTopic }, createArticle: async ({ article }: { article: ShoutInput }): Promise => { - const response = await privateGraphQLClient.mutation(createArticle, { shout: article }).toPromise() + const response = await graphQLClient.mutation(createArticle, { shout: article }).toPromise() return response.data.createShout.shout }, updateArticle: async ({ @@ -281,57 +280,55 @@ export const apiClient = { shoutInput?: ShoutInput publish: boolean }): Promise => { - const response = await privateGraphQLClient + const response = await graphQLClient .mutation(updateArticle, { shoutId, shoutInput, publish }) .toPromise() console.debug('[updateArticle]:', response.data) return response.data.updateShout.shout }, deleteShout: async ({ shoutId }: { shoutId: number }): Promise => { - const response = await privateGraphQLClient.mutation(deleteShout, { shoutId }).toPromise() + const response = await graphQLClient.mutation(deleteShout, { shoutId }).toPromise() console.debug('[deleteShout]:', response) }, getDrafts: async (): Promise => { - const response = await privateGraphQLClient.query(draftsLoad, {}).toPromise() + const response = await graphQLClient.query(draftsLoad, {}).toPromise() console.debug('[getDrafts]:', response) return response.data.loadDrafts }, createReaction: async (input: ReactionInput) => { - const response = await privateGraphQLClient.mutation(reactionCreate, { reaction: input }).toPromise() + const response = await graphQLClient.mutation(reactionCreate, { reaction: input }).toPromise() console.debug('[createReaction]:', response) return response.data.createReaction.reaction }, destroyReaction: async (id: number) => { - const response = await privateGraphQLClient.mutation(reactionDestroy, { id: id }).toPromise() + const response = await graphQLClient.mutation(reactionDestroy, { id: id }).toPromise() console.debug('[destroyReaction]:', response) return response.data.deleteReaction.reaction }, updateReaction: async (id: number, input: ReactionInput) => { - const response = await privateGraphQLClient - .mutation(reactionUpdate, { id: id, reaction: input }) - .toPromise() + const response = await graphQLClient.mutation(reactionUpdate, { id: id, reaction: input }).toPromise() console.debug('[updateReaction]:', response) return response.data.updateReaction.reaction }, getAuthorsBy: async (options: QueryLoadAuthorsByArgs) => { - const resp = await publicGraphQLClient.query(authorsLoadBy, options).toPromise() + const resp = await graphQLClient.query(authorsLoadBy, options).toPromise() return resp.data.loadAuthorsBy }, getShoutBySlug: async (slug: string) => { - const resp = await publicGraphQLClient + const resp = await graphQLClient .query(shoutLoad, { slug, }) .toPromise() - // if (resp.error) { - // console.error(resp) - // } + if (resp.error) { + console.error(resp) + } return resp.data.loadShout }, getShoutById: async (shoutId: number) => { - const resp = await publicGraphQLClient + const resp = await graphQLClient .query(shoutLoad, { shoutId, }) @@ -345,7 +342,7 @@ export const apiClient = { }, getShouts: async (options: LoadShoutsOptions) => { - const resp = await publicGraphQLClient.query(shoutsLoadBy, { options }).toPromise() + const resp = await graphQLClient.query(shoutsLoadBy, { options }).toPromise() if (resp.error) { console.error(resp) } @@ -354,7 +351,7 @@ export const apiClient = { }, getRandomTopShouts: async (params: LoadRandomTopShoutsParams): Promise => { - const resp = await publicGraphQLClient.query(articlesLoadRandomTop, { params }).toPromise() + const resp = await graphQLClient.query(articlesLoadRandomTop, { params }).toPromise() if (resp.error) { console.error(resp) } @@ -363,7 +360,7 @@ export const apiClient = { }, getUnratedShouts: async (limit: number): Promise => { - const resp = await publicGraphQLClient.query(articlesLoadUnrated, { limit }).toPromise() + const resp = await graphQLClient.query(articlesLoadUnrated, { limit }).toPromise() if (resp.error) { console.error(resp) } @@ -372,7 +369,7 @@ export const apiClient = { }, getMyFeed: async (options: LoadShoutsOptions) => { - const resp = await privateGraphQLClient.query(myFeed, { options }).toPromise() + const resp = await graphQLClient.query(myFeed, { options }).toPromise() if (resp.error) { console.error(resp) @@ -382,17 +379,17 @@ export const apiClient = { }, getReactionsBy: async ({ by, limit }: { by: ReactionBy; limit?: number }) => { - const resp = await publicGraphQLClient + const resp = await graphQLClient .query(reactionsLoadBy, { by, limit: limit ?? 1000, offset: 0 }) .toPromise() return resp.data.loadReactionsBy }, getNotifications: async (params: NotificationsQueryParams): Promise => { - const resp = await privateGraphQLClient.query(notifications, { params }).toPromise() + const resp = await graphQLClient.query(notifications, { params }).toPromise() return resp.data.loadNotifications }, markNotificationAsRead: async (notificationId: number): Promise => { - await privateGraphQLClient + await graphQLClient .mutation(markNotificationAsRead, { notificationId, }) @@ -400,37 +397,37 @@ export const apiClient = { }, markAllNotificationsAsRead: async (): Promise => { - await privateGraphQLClient.mutation(markAllNotificationsAsRead, {}).toPromise() + await graphQLClient.mutation(markAllNotificationsAsRead, {}).toPromise() }, getMySubscriptions: async (): Promise => { - const resp = await privateGraphQLClient.query(mySubscriptions, {}).toPromise() + const resp = await graphQLClient.query(mySubscriptions, {}).toPromise() // console.debug(resp.data) return resp.data.loadMySubscriptions }, // inbox getChats: async (options: QueryLoadChatsArgs): Promise => { - const resp = await privateGraphQLClient.query(myChats, options).toPromise() + const resp = await graphQLClient.query(myChats, options).toPromise() return resp.data.loadChats.chats }, createChat: async (options: MutationCreateChatArgs) => { - const resp = await privateGraphQLClient.mutation(createChat, options).toPromise() + const resp = await graphQLClient.mutation(createChat, options).toPromise() return resp.data.createChat }, createMessage: async (options: MutationCreateMessageArgs) => { - const resp = await privateGraphQLClient.mutation(createMessage, options).toPromise() + const resp = await graphQLClient.mutation(createMessage, options).toPromise() return resp.data.createMessage.message }, getChatMessages: async (options: QueryLoadMessagesByArgs) => { - const resp = await privateGraphQLClient.query(chatMessagesLoadBy, options).toPromise() + const resp = await graphQLClient.query(chatMessagesLoadBy, options).toPromise() return resp.data.loadMessagesBy.messages }, getRecipients: async (options: QueryLoadRecipientsArgs) => { - const resp = await privateGraphQLClient.query(loadRecipients, options).toPromise() + const resp = await graphQLClient.query(loadRecipients, options).toPromise() return resp.data.loadRecipients.members }, }