feat: Use no CDN for writepost and editpost

Author: velopert

.github/workflows/main.yml

@@ -30,6 +30,7 @@ jobs:
       env:
         REACT_APP_API_HOST: 'https://v2.velog.io/'
         REACT_APP_GRAPHQL_HOST: 'https://v2cdn.velog.io/'
+        REACT_APP_GRAPHQL_HOST_NOCDN: 'https://v2.velog.io/'
         PUBLIC_URL: 'https://static.velog.io/'
         REACT_APP_REDIS_HOST: ${{ secrets.REDIS_HOST }}
         CI: false

src/containers/write/MarkdownEditorContainer.tsx

@@ -42,6 +42,7 @@ import { Helmet } from 'react-helmet-async';
 import { toast } from 'react-toastify';
 import { usePrevious } from 'react-use';
 import { useTheme } from '../../lib/hooks/useTheme';
+import { noCdnClient } from '../../lib/graphql/client';
 
 export type MarkdownEditorContainerProps = {};
 
@@ -59,10 +60,14 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
     initialTitle,
     tags,
   } = useSelector((state: RootState) => state.write);
-  const [writePost] = useMutation<WritePostResponse>(WRITE_POST);
+  const [writePost] = useMutation<WritePostResponse>(WRITE_POST, {
+    client: noCdnClient,
+  });
   const [createPostHistory] =
     useMutation<CreatePostHistoryResponse>(CREATE_POST_HISTORY);
-  const [editPost] = useMutation<EditPostResult>(EDIT_POST);
+  const [editPost] = useMutation<EditPostResult>(EDIT_POST, {
+    client: noCdnClient,
+  });
 
   const [lastSavedData, setLastSavedData] = useState({
     title: initialTitle,

src/containers/write/PublishActionButtonsContainer.tsx

@@ -16,10 +16,13 @@ import { useMutation, useApolloClient } from '@apollo/react-hooks';
 import { setHeadingId } from '../../lib/heading';
 import { useHistory } from 'react-router';
 import { toast } from 'react-toastify';
+import { noCdnClient } from '../../lib/graphql/client';
 
 type PublishActionButtonsContainerProps = {};
 
-const PublishActionButtonsContainer: React.FC<PublishActionButtonsContainerProps> = () => {
+const PublishActionButtonsContainer: React.FC<
+  PublishActionButtonsContainerProps
+> = () => {
   const history = useHistory();
   const client = useApolloClient();
 
@@ -49,8 +52,12 @@ const PublishActionButtonsContainer: React.FC<PublishActionButtonsContainerProps
     dispatch(closePublish());
   }, [dispatch]);
 
-  const [writePost] = useMutation<WritePostResponse>(WRITE_POST);
-  const [editPost] = useMutation<EditPostResult>(EDIT_POST);
+  const [writePost] = useMutation<WritePostResponse>(WRITE_POST, {
+    client: noCdnClient,
+  });
+  const [editPost] = useMutation<EditPostResult>(EDIT_POST, {
+    client: noCdnClient,
+  });
 
   const variables = {
     title: options.title,

src/lib/graphql/client.ts

@@ -7,15 +7,34 @@ const host =
     ? '/'
     : process.env.REACT_APP_GRAPHQL_HOST) || '/';
 
+const noCdnHost =
+  (process.env.NODE_ENV === 'development'
+    ? '/'
+    : process.env.REACT_APP_GRAPHQL_HOST_NOCDN) || '/';
+
+const cache = new InMemoryCache().restore((window as any).__APOLLO_STATE__);
+
 const graphqlURI = host.concat('graphql');
+const noCdnGraphqlURI = noCdnHost.concat('graphql');
+
 const link = createHttpLink({
   uri: graphqlURI,
   credentials: 'include',
 });
 
+const noCdnLink = createHttpLink({
+  uri: noCdnGraphqlURI,
+  credentials: 'include',
+});
+
 const client = new ApolloClient({
   link,
-  cache: new InMemoryCache().restore((window as any).__APOLLO_STATE__),
+  cache,
+});
+
+export const noCdnClient = new ApolloClient({
+  link: noCdnLink,
+  cache,
 });
 
 (window as any).client = client;