fix: 🐛 Fixes SSR WritePage Error by using noCdnClient via context

Author: velopert

src/containers/write/MarkdownEditorContainer.tsx

@@ -42,7 +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';
+import { useUncachedApolloClient } from '../../lib/graphql/UncachedApolloContext';
 
 export type MarkdownEditorContainerProps = {};
 
@@ -60,13 +60,14 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
     initialTitle,
     tags,
   } = useSelector((state: RootState) => state.write);
+  const uncachedClient = useUncachedApolloClient();
   const [writePost] = useMutation<WritePostResponse>(WRITE_POST, {
-    client: noCdnClient,
+    client: uncachedClient,
   });
   const [createPostHistory] =
     useMutation<CreatePostHistoryResponse>(CREATE_POST_HISTORY);
   const [editPost] = useMutation<EditPostResult>(EDIT_POST, {
-    client: noCdnClient,
+    client: uncachedClient,
   });
 
   const [lastSavedData, setLastSavedData] = useState({

src/containers/write/PublishActionButtonsContainer.tsx

@@ -16,7 +16,7 @@ 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';
+import { useUncachedApolloClient } from '../../lib/graphql/UncachedApolloContext';
 
 type PublishActionButtonsContainerProps = {};
 
@@ -52,11 +52,13 @@ const PublishActionButtonsContainer: React.FC<
     dispatch(closePublish());
   }, [dispatch]);
 
+  const uncachedClient = useUncachedApolloClient();
+
   const [writePost] = useMutation<WritePostResponse>(WRITE_POST, {
-    client: noCdnClient,
+    client: uncachedClient,
   });
   const [editPost] = useMutation<EditPostResult>(EDIT_POST, {
-    client: noCdnClient,
+    client: uncachedClient,
   });
 
   const variables = {

src/index.tsx

@@ -9,13 +9,14 @@ import './typography.css';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
-import client from './lib/graphql/client';
+import client, { noCdnClient } from './lib/graphql/client';
 import rootReducer from './modules';
 import storage from './lib/storage';
 import { setUser } from './modules/core';
 import * as Sentry from '@sentry/browser';
 import { HelmetProvider } from 'react-helmet-async';
 import darkMode from './modules/darkMode';
+import { UncachedApolloProvider } from './lib/graphql/UncachedApolloContext';
 
 Sentry.init({
   dsn: 'https://[email protected]/1886813',
@@ -66,11 +67,13 @@ if (process.env.NODE_ENV === 'production') {
   ReactDOM.render(
     <HelmetProvider>
       <Provider store={store}>
-        <ApolloProvider client={client}>
-          <BrowserRouter>
-            <App />
-          </BrowserRouter>
-        </ApolloProvider>
+        <UncachedApolloProvider client={noCdnClient}>
+          <ApolloProvider client={client}>
+            <BrowserRouter>
+              <App />
+            </BrowserRouter>
+          </ApolloProvider>
+        </UncachedApolloProvider>
       </Provider>
     </HelmetProvider>,
     document.getElementById('root'),

src/lib/graphql/UncachedApolloContext.tsx

@@ -0,0 +1,27 @@
+import { ApolloClient } from 'apollo-boost';
+import React, { createContext } from 'react';
+
+const UncachedApolloContext = createContext<ApolloClient<any> | null>(null);
+export function UncachedApolloProvider({
+  client,
+  children,
+}: {
+  client: ApolloClient<any>;
+  children: React.ReactNode;
+}) {
+  return (
+    <UncachedApolloContext.Provider value={client}>
+      {children}
+    </UncachedApolloContext.Provider>
+  );
+}
+
+export function useUncachedApolloClient() {
+  const value = React.useContext(UncachedApolloContext);
+  if (value === null) {
+    throw new Error(
+      'useUncachedApolloClient must be used within a UncachedApolloProvider',
+    );
+  }
+  return value;
+}

src/server/serverRender.tsx

@@ -18,6 +18,7 @@ import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
 import CacheManager from './CacheManager';
 import { HelmetProvider, FilledContext } from 'react-helmet-async';
 import error from '../modules/error';
+import { UncachedApolloProvider } from '../lib/graphql/UncachedApolloContext';
 
 const statsFile = path.resolve(__dirname, '../build/loadable-stats.json');
 const cacheManager = new CacheManager();
@@ -87,11 +88,13 @@ const serverRender = async ({ url, loggedIn, cookie }: SSROption) => {
       <HelmetProvider context={helmetContext}>
         <StyleSheetManager sheet={sheet.instance}>
           <Provider store={store}>
-            <ApolloProvider client={client}>
-              <StaticRouter location={url} context={context}>
-                <App />
-              </StaticRouter>
-            </ApolloProvider>
+            <UncachedApolloProvider client={client}>
+              <ApolloProvider client={client}>
+                <StaticRouter location={url} context={context}>
+                  <App />
+                </StaticRouter>
+              </ApolloProvider>
+            </UncachedApolloProvider>
           </Provider>
         </StyleSheetManager>
       </HelmetProvider>