From b9893667750612b152bdd8a209fcd18d2bea4fe4 Mon Sep 17 00:00:00 2001
From: handtrix <handtrix@gmail.com>
Date: Wed, 4 Sep 2019 14:44:24 +0200
Subject: [PATCH] Add client only example page

https://github.com/zeit/next.js/pull/8620#issuecomment-527870886
---
 examples/with-apollo/components/Header.js  |  5 ++++
 examples/with-apollo/components/InfoBox.js | 17 ++++++++++++
 examples/with-apollo/pages/client-only.js  | 31 ++++++++++++++++++++++
 examples/with-apollo/pages/index.js        | 13 +++++++++
 4 files changed, 66 insertions(+)
 create mode 100644 examples/with-apollo/components/InfoBox.js
 create mode 100644 examples/with-apollo/pages/client-only.js

diff --git a/examples/with-apollo/components/Header.js b/examples/with-apollo/components/Header.js
index fab93963bb91c5..23700a99a34e2d 100644
--- a/examples/with-apollo/components/Header.js
+++ b/examples/with-apollo/components/Header.js
@@ -6,6 +6,11 @@ const Header = ({ router: { pathname } }) => (
     <Link href='/'>
       <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
     </Link>
+    <Link href='/client-only'>
+      <a className={pathname === '/client-only' ? 'is-active' : ''}>
+        Client-Only
+      </a>
+    </Link>
     <Link href='/about'>
       <a className={pathname === '/about' ? 'is-active' : ''}>About</a>
     </Link>
diff --git a/examples/with-apollo/components/InfoBox.js b/examples/with-apollo/components/InfoBox.js
new file mode 100644
index 00000000000000..9b84bf1fe78b55
--- /dev/null
+++ b/examples/with-apollo/components/InfoBox.js
@@ -0,0 +1,17 @@
+const InfoBox = ({ children }) => (
+  <div className='info'>
+    <style jsx>{`
+      .info {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        border-top: 1px solid #ececec;
+        border-bottom: 1px solid #ececec;
+      }
+    `}</style>
+    {children}
+  </div>
+)
+
+export default InfoBox
diff --git a/examples/with-apollo/pages/client-only.js b/examples/with-apollo/pages/client-only.js
new file mode 100644
index 00000000000000..1ad91beb1f8479
--- /dev/null
+++ b/examples/with-apollo/pages/client-only.js
@@ -0,0 +1,31 @@
+import App from '../components/App'
+import InfoBox from '../components/InfoBox'
+import Header from '../components/Header'
+import Submit from '../components/Submit'
+import PostList from '../components/PostList'
+import { withApollo } from '../lib/apollo'
+
+const ClientOnlyPage = props => (
+  <App>
+    <Header />
+    <InfoBox>
+      ℹ️ This example shows how to disable apollos query fetching on the server.
+      If you <a href='/client-only'>reload</a> this page, you will see a loader
+      since Apollo didn't fetch any data on the server. This allows{' '}
+      <a
+        href='https://nextjs.org/blog/next-9#automatic-static-optimization'
+        target='_blank'
+      >
+        automatic static optimization
+      </a>
+      .
+    </InfoBox>
+    <Submit />
+    <PostList />
+  </App>
+)
+
+export default withApollo(ClientOnlyPage, {
+  // Disable apollo ssr fetching in favor of automatic static optimization
+  ssr: false
+})
diff --git a/examples/with-apollo/pages/index.js b/examples/with-apollo/pages/index.js
index 7ba78076068539..15b5e67073b87a 100644
--- a/examples/with-apollo/pages/index.js
+++ b/examples/with-apollo/pages/index.js
@@ -1,4 +1,5 @@
 import App from '../components/App'
+import InfoBox from '../components/InfoBox'
 import Header from '../components/Header'
 import Submit from '../components/Submit'
 import PostList from '../components/PostList'
@@ -7,6 +8,18 @@ import { withApollo } from '../lib/apollo'
 const IndexPage = props => (
   <App>
     <Header />
+    <InfoBox>
+      ℹ️ This example shows how to fetch all initial apollo queries on the
+      server. If you <a href='/'>reload</a> this page you won't see a loader
+      since Apollo fetched all needed data on the server. This prevents{' '}
+      <a
+        href='https://nextjs.org/blog/next-9#automatic-static-optimization'
+        target='_blank'
+      >
+        automatic static optimization
+      </a>{' '}
+      in favor of full Server-Side-Rendering.
+    </InfoBox>
     <Submit />
     <PostList />
   </App>