feat: using subscription for deploy completed event

Author: winverse

apps/book-server/package.json

@@ -27,6 +27,7 @@
     "@fastify/cookie": "^9.3.1",
     "@fastify/cors": "^8.3.0",
     "@fastify/mongodb": "^8.0.0",
+    "@fastify/websocket": "^10.0.1",
     "@graphql-tools/utils": "^10.2.1",
     "@packages/commonjs": "workspace:*",
     "@packages/database": "workspace:*",

apps/book-server/src/common/plugins/global/corsPlugin.mts

@@ -4,8 +4,8 @@ import cors from '@fastify/cors'
 import { ForbiddenError } from '@errors/ForbiddenError.mjs'
 import { ENV } from '@env'
 
-const corsPlugin: FastifyPluginAsync = async (fastify) => {
-  const corsWhitelist: RegExp[] = [
+export const getWhiteList = (): RegExp[] => {
+  const whiteList: RegExp[] = [
     /^https:\/\/velog.io$/,
     /^https:\/\/(.*).velog.io$/,
     /^https:\/\/(.*\.velog\.io)$/,
@@ -14,13 +14,19 @@ const corsPlugin: FastifyPluginAsync = async (fastify) => {
   ]
 
   if (ENV.appEnv === 'development') {
-    corsWhitelist.push(/^http:\/\/localhost/)
+    whiteList.push(/^http:\/\/localhost/)
   }
 
+  return whiteList
+}
+
+const corsPlugin: FastifyPluginAsync = async (fastify) => {
+  const corsWhiteList = getWhiteList()
+
   await fastify.register(cors, {
     credentials: true,
     origin: (origin, callback) => {
-      if (!origin || corsWhitelist.some((re) => re.test(origin))) {
+      if (!origin || corsWhiteList.some((re) => re.test(origin))) {
         callback(null, true)
       } else {
         callback(new ForbiddenError('Not allow origin'), false)

apps/book-server/src/common/plugins/global/mercuriusPlugin.mts

@@ -9,6 +9,7 @@ import { MqService } from '@lib/mq/MqService.mjs'
 import { GraphQLContextBase } from '@interfaces/graphql.mjs'
 import { ENV } from '@env'
 import { schemaTransforms } from '@graphql/transformer/index.mjs'
+import { getWhiteList } from './corsPlugin.mjs'
 
 const mercuriusPlugin: FastifyPluginAsync = async (fastify) => {
   const mqService = container.resolve(MqService)
@@ -21,12 +22,11 @@ const mercuriusPlugin: FastifyPluginAsync = async (fastify) => {
     subscription: {
       emitter: mqService.emitter,
       verifyClient: (info, next) => {
-        // if (info.req.headers['x-fastify-header'] !== 'fastify is awesome !') {
-        //   return next(false) // the connection is not allowed
-        // }
-
-        next(false)
-        // next(true) // the connection is allowed
+        const whiteList = getWhiteList()
+        if (info.origin && !whiteList.some((re) => re.test(info.origin))) {
+          return next(false)
+        }
+        next(true) // the connection is allowed
       },
     },
     context: (request, reply): GraphQLContextBase => {

apps/book-server/src/graphql/Book.gql

@@ -19,7 +19,7 @@ type Mutation {
 type Subscription {
   buildInstalled(input: BookUrlSlugInput!): SubScriptionPayload @auth
   buildCompleted(input: BookUrlSlugInput!): SubScriptionPayload @auth
-  deployCompleted(input: BookUrlSlugInput!): SubScriptionPayload @auth
+  deployCompleted(input: BookUrlSlugInput!): DeployCompletedPayload
 }
 
 input BookIdInput {
@@ -34,14 +34,19 @@ type SubScriptionPayload {
   message: String!
 }
 
+type DeployCompletedPayload {
+  message: String!
+  published_url: String!
+}
+
 type BuildResult {
   result: Boolean!
   message: String
 }
 
 type DeployResult {
+  message: String!
   published_url: String
-  message: String
 }
 
 input IsDeployInput {

apps/book-server/src/graphql/generated.ts

@@ -65,6 +65,11 @@ export type DeletePageInput = {
   page_url_slug: Scalars['String']['input']
 }
 
+export type DeployCompletedPayload = {
+  message: Scalars['String']['output']
+  published_url: Scalars['String']['output']
+}
+
 export type DeployResult = {
   message?: Maybe<Scalars['String']['output']>
   published_url?: Maybe<Scalars['String']['output']>
@@ -173,7 +178,7 @@ export type SubScriptionPayload = {
 export type Subscription = {
   buildCompleted?: Maybe<SubScriptionPayload>
   buildInstalled?: Maybe<SubScriptionPayload>
-  deployCompleted?: Maybe<SubScriptionPayload>
+  deployCompleted?: Maybe<DeployCompletedPayload>
 }
 
 export type SubscriptionBuildCompletedArgs = {
@@ -296,6 +301,7 @@ export type ResolversTypes = {
   CreatePageInput: CreatePageInput
   Date: ResolverTypeWrapper<Scalars['Date']['output']>
   DeletePageInput: DeletePageInput
+  DeployCompletedPayload: ResolverTypeWrapper<DeployCompletedPayload>
   DeployResult: ResolverTypeWrapper<DeployResult>
   GetPageInput: GetPageInput
   GetPagesInput: GetPagesInput
@@ -327,6 +333,7 @@ export type ResolversParentTypes = {
   CreatePageInput: CreatePageInput
   Date: Scalars['Date']['output']
   DeletePageInput: DeletePageInput
+  DeployCompletedPayload: DeployCompletedPayload
   DeployResult: DeployResult
   GetPageInput: GetPageInput
   GetPagesInput: GetPagesInput
@@ -381,6 +388,16 @@ export interface DateScalarConfig extends GraphQLScalarTypeConfig<ResolversTypes
   name: 'Date'
 }
 
+export type DeployCompletedPayloadResolvers<
+  ContextType = GraphQLContext,
+  ParentType extends
+    ResolversParentTypes['DeployCompletedPayload'] = ResolversParentTypes['DeployCompletedPayload'],
+> = {
+  message?: Resolver<ResolversTypes['String'], ParentType, ContextType>
+  published_url?: Resolver<ResolversTypes['String'], ParentType, ContextType>
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>
+}
+
 export type DeployResultResolvers<
   ContextType = GraphQLContext,
   ParentType extends ResolversParentTypes['DeployResult'] = ResolversParentTypes['DeployResult'],
@@ -521,7 +538,7 @@ export type SubscriptionResolvers<
     RequireFields<SubscriptionBuildInstalledArgs, 'input'>
   >
   deployCompleted?: SubscriptionResolver<
-    Maybe<ResolversTypes['SubScriptionPayload']>,
+    Maybe<ResolversTypes['DeployCompletedPayload']>,
     'deployCompleted',
     ParentType,
     ContextType,
@@ -549,6 +566,7 @@ export type Resolvers<ContextType = GraphQLContext> = {
   Book?: BookResolvers<ContextType>
   BuildResult?: BuildResultResolvers<ContextType>
   Date?: GraphQLScalarType
+  DeployCompletedPayload?: DeployCompletedPayloadResolvers<ContextType>
   DeployResult?: DeployResultResolvers<ContextType>
   JSON?: GraphQLScalarType
   Mutation?: MutationResolvers<ContextType>

apps/book-server/src/lib/mq/MqService.mts

@@ -32,9 +32,9 @@ export class MqService {
 
   public topicGenerator<T extends SubscriptionResolverKey>(type: T): (args: any) => string {
     const map: TopicMap = {
-      buildCompleted: (bookId: string) => `BOOK_BUILD:completed:${bookId}`,
-      buildInstalled: (bookId: string) => `BOOK_BUILD:installed:${bookId}`,
-      deployCompleted: (bookId: string) => `BOOK_DEPLOY:completed:${bookId}`,
+      buildCompleted: (bookUrlSlug: string) => `BOOK_BUILD:completed:${bookUrlSlug}`,
+      buildInstalled: (bookUrlSlug: string) => `BOOK_BUILD:installed:${bookUrlSlug}`,
+      deployCompleted: (bookUrlSlug: string) => `BOOK_DEPLOY:completed:${bookUrlSlug}`,
     }
     const generator = map[type]
     if (!generator) {
@@ -53,7 +53,7 @@ export class MqService {
 
 type SubscriptionResolverKey = keyof SubscriptionResolvers
 type Payload = {
-  [K in SubscriptionResolverKey]?: { message: string } & { [k in string]: any }
+  [K in SubscriptionResolverKey]?: { message: string } & { [key in string]: any }
 }
 type TopicMap = {
   [K in SubscriptionResolverKey]: (args: any) => string

apps/book-server/src/services/BookBuildService/index.mts

@@ -98,7 +98,7 @@ export class BookBuildService implements Service {
         const stdout = await this.installDependencies('npm install', dest)
         if (stdout) {
           this.mq.publish({
-            topicParameter: book.id,
+            topicParameter: book.url_slug,
             payload: {
               buildInstalled: {
                 message: stdout,
@@ -137,7 +137,7 @@ export class BookBuildService implements Service {
       const buildStdout = await this.buildTsToJs(dest)
       if (buildStdout) {
         this.mq.publish({
-          topicParameter: book.id,
+          topicParameter: book.url_slug,
           payload: {
             buildCompleted: { message: buildStdout },
           },

apps/book-server/src/services/BookDeployService/index.mts

@@ -115,8 +115,9 @@ export class BookDeployService implements Service {
         })
       })
 
+      console.log('published_urlpublished_url', published_url)
       this.mq.publish({
-        topicParameter: book.id,
+        topicParameter: book.url_slug,
         payload: {
           deployCompleted: {
             message: 'Deploy completed',

apps/book-web/src/graphql/bookServer/book.gql

@@ -14,8 +14,9 @@ query isDeploy($input: IsDeployInput!) {
   isDeploy(input: $input)
 }
 
-subscription DeployCompleted($input: BookUrlSlugInput!) {
+subscription deployCompleted($input: BookUrlSlugInput!) {
   deployCompleted(input: $input) {
     message
+    published_url
   }
 }

apps/book-web/src/graphql/bookServer/generated/bookServer.ts

@@ -65,6 +65,11 @@ export type DeletePageInput = {
   page_url_slug: Scalars['String']['input']
 }
 
+export type DeployCompletedPayload = {
+  message: Scalars['String']['output']
+  published_url: Scalars['String']['output']
+}
+
 export type DeployResult = {
   message: Maybe<Scalars['String']['output']>
   published_url: Maybe<Scalars['String']['output']>
@@ -173,7 +178,7 @@ export type SubScriptionPayload = {
 export type Subscription = {
   buildCompleted: Maybe<SubScriptionPayload>
   buildInstalled: Maybe<SubScriptionPayload>
-  deployCompleted: Maybe<SubScriptionPayload>
+  deployCompleted: Maybe<DeployCompletedPayload>
 }
 
 export type SubscriptionBuildCompletedArgs = {
@@ -226,7 +231,9 @@ export type DeployCompletedSubscriptionVariables = Exact<{
   input: BookUrlSlugInput
 }>
 
-export type DeployCompletedSubscription = { deployCompleted: { message: string } | null }
+export type DeployCompletedSubscription = {
+  deployCompleted: { message: string; published_url: string } | null
+}
 
 export type GetPagesQueryVariables = Exact<{
   input: GetPagesInput
@@ -392,9 +399,10 @@ useIsDeployQuery.fetcher = (variables: IsDeployQueryVariables, options?: Request
   fetcher<IsDeployQuery, IsDeployQueryVariables>(IsDeployDocument, variables, options)
 
 export const DeployCompletedDocument = `
-    subscription DeployCompleted($input: BookUrlSlugInput!) {
+    subscription deployCompleted($input: BookUrlSlugInput!) {
   deployCompleted(input: $input) {
     message
+    published_url
   }
 }
     `

apps/book-web/src/layouts/MarkdownEditorLayout/MarkdownEditorLayout.tsx

@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react'
 import { BookMetadata, generateBookMetadata, Pages } from '@/lib/generateBookMetadata'
 import {
   DeployCompletedDocument,
+  DeployCompletedPayload,
   useBuildMutation,
   useCreatePageMutation,
   useDeletePageMutation,
@@ -56,13 +57,23 @@ function MarkdownEditorLayout({ children, mdxText }: Props) {
     },
   })
 
-  const deployCompleted = useSubscription({
+  const [deployCompleted] = useSubscription<DeployCompletedPayload>({
     query: DeployCompletedDocument,
     variables: { input: { book_url_slug: bookUrlSlug } },
   })
 
+  // 재접속시에 deploy 결과 확인
   useEffect(() => {
+    if (!deployCompleted.data) return
     console.log(deployCompleted)
+    const { message, published_url } = deployCompleted.data
+    if (published_url) {
+      console.log('published_url in client', published_url)
+      const event = new CustomEvent(markdownCustomEventName.deployEndEvent, {
+        detail: { publishedUrl: published_url },
+      })
+      window.dispatchEvent(event)
+    }
   }, [deployCompleted])
 
   const { data: isDeployData } = useIsDeployQuery({

apps/book-web/src/provider/UrqlProvider.tsx

@@ -10,16 +10,19 @@ const wsClient = createWSClient({
   url: `ws://${ENV.graphqlBookServerHost.replace(/^http(s)?:\/\//, '')}/graphql`,
 })
 
-export const urqlClient = createClient({
+const urqlClient = createClient({
   url: `${ENV.graphqlBookServerHost}/graphql`,
   exchanges: [
     cacheExchange,
     fetchExchange,
     subscriptionExchange({
-      forwardSubscription: (operation) => ({
-        subscribe: (sink) => ({
-          unsubscribe: wsClient.subscribe(operation as SubscribePayload, sink),
-        }),
+      forwardSubscription: (request) => ({
+        subscribe: (sink) => {
+          const input = { ...request, query: request.query || '' }
+          return {
+            unsubscribe: wsClient.subscribe(input, sink),
+          }
+        },
       }),
     }),
   ],
@@ -29,4 +32,4 @@ function UrqlProvider({ children }: Props) {
   return <Provider value={urqlClient}>{children}</Provider>
 }
 
-export default UrqlProvider
+export default UrqlProvider