title: Data becomes undefined in usequery of apollo client only when refreshing the page in the browser
body: <p>The following code works when it hot reloads the react app. But when I press the refresh button(or press F5), the app crashes saying that the data is undefined.</p>
  <p>I have already tried the fetch-cache-policies, everyone of them
  There are no errors in the gql playground and also the apollo client devtools. The queries are workin fine.</p>
  <pre><code>import React, { useContext } from 'react';
  import { useQuery } from '@apollo/client';
  import { Grid } from 'semantic-ui-react';
  import PostCard from '../components/PostCard';
  import PostForm from '../components/PostForm';
  import { AuthContext } from '../context/auth';
  import { FETCH_POSTS_QUERY } from '../util/graphql';
  
  function Home() {
    const { user } = useContext(AuthContext);
    const { loading, data } = useQuery(FETCH_POSTS_QUERY);
    // console.log(loading, data);
    const { getPosts: posts } = data;
    return (
      &lt;Grid columns={3}&gt;
        &lt;Grid.Row className=&quot;page-title&quot;&gt;
          &lt;h1&gt;Recent Posts&lt;/h1&gt;
        &lt;/Grid.Row&gt;
        &lt;Grid.Row&gt;
          {user &amp;&amp; (
            &lt;Grid.Column&gt;
              &lt;PostForm /&gt;
            &lt;/Grid.Column&gt;
          )}
          {loading ? (
            &lt;h1&gt;Loading Posts...&lt;/h1&gt;
          ) : (
           posts &amp;&amp;
            posts.map((post) =&gt; (
              &lt;Grid.Column key={post.id} style={{ 
  marginBottom: '20px' }}&gt;
                &lt;PostCard post={post} /&gt;
              &lt;/Grid.Column&gt;
            ))
          )}
        &lt;/Grid.Row&gt;
      &lt;/Grid&gt;
    );
  }
  
  export default Home;
  </code></pre>
  <p>This is the FETCH_POSTS_QUERY</p>
  <pre><code>import { gql } from '@apollo/client';
  
  export const FETCH_POSTS_QUERY = gql`
    {
      getPosts {
        id
        body
        createdAt
        username
        likeCount
        likes {
          username
        }
        commentCount
        comments {
          id
          username
          createdAt
          body
        }
      }
    }
  `;
  </code></pre>
  <p>this is the error</p>
  <pre><code>main.chunk.js:1427 Uncaught TypeError: Cannot destructure property 'getPosts' of 'data' as it is undefined.
      at Home (main.chunk.js:1427)
      at renderWithHooks (0.chunk.js:75555)
      at mountIndeterminateComponent (0.chunk.js:78317)
      at beginWork (0.chunk.js:79516)
      at HTMLUnknownElement.callCallback (0.chunk.js:64505)
      at Object.invokeGuardedCallbackDev (0.chunk.js:64554)
      at invokeGuardedCallback (0.chunk.js:64614)
      at beginWork$1 (0.chunk.js:84356)
      at performUnitOfWork (0.chunk.js:83192)
      at workLoopSync (0.chunk.js:83129)
      at renderRootSync (0.chunk.js:83095)
      at performSyncWorkOnRoot (0.chunk.js:82712)
      at scheduleUpdateOnFiber (0.chunk.js:82300)
      at updateContainer (0.chunk.js:85837)
      at 0.chunk.js:86369
      at unbatchedUpdates (0.chunk.js:82852)
      at legacyRenderSubtreeIntoContainer (0.chunk.js:86368)
      at Object.render (0.chunk.js:86451)
      at Module.&lt;anonymous&gt; (main.chunk.js:1301)
      at Module../src/index.js (main.chunk.js:1376)
      at __webpack_require__ (bundle.js:852)
      at fn (bundle.js:151)
      at Object.1 (main.chunk.js:2488)
      at __webpack_require__ (bundle.js:852)
      at checkDeferredModules (bundle.js:46)
      at Array.webpackJsonpCallback [as push] (bundle.js:33)
      at main.chunk.js:1
  Home @ main.chunk.js:1427
  renderWithHooks @ 0.chunk.js:75555
  mountIndeterminateComponent @ 0.chunk.js:78317
  beginWork @ 0.chunk.js:79516
  callCallback @ 0.chunk.js:64505
  invokeGuardedCallbackDev @ 0.chunk.js:64554
  invokeGuardedCallback @ 0.chunk.js:64614
  beginWork$1 @ 0.chunk.js:84356
  performUnitOfWork @ 0.chunk.js:83192
  workLoopSync @ 0.chunk.js:83129
  renderRootSync @ 0.chunk.js:83095
  performSyncWorkOnRoot @ 0.chunk.js:82712
  scheduleUpdateOnFiber @ 0.chunk.js:82300
  updateContainer @ 0.chunk.js:85837
  (anonymous) @ 0.chunk.js:86369
  unbatchedUpdates @ 0.chunk.js:82852
  legacyRenderSubtreeIntoContainer @ 0.chunk.js:86368
  render @ 0.chunk.js:86451
  (anonymous) @ main.chunk.js:1301
  ./src/index.js @ main.chunk.js:1376
  __webpack_require__ @ bundle.js:852
  fn @ bundle.js:151
  1 @ main.chunk.js:2488
  __webpack_require__ @ bundle.js:852
  checkDeferredModules @ bundle.js:46
  webpackJsonpCallback @ bundle.js:33
  (anonymous) @ main.chunk.js:1
  0.chunk.js:88061 The above error occurred in the &lt;Home&gt; component:
  
      at Home (http://localhost:3000/static/js/main.chunk.js:1420:63)
      at Route (http://localhost:3000/static/js/0.chunk.js:90932:29)
      at div
      at Container (http://localhost:3000/static/js/0.chunk.js:102737:24)
      at Router (http://localhost:3000/static/js/0.chunk.js:90567:30)
      at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:90187:35)
      at AuthProvider (http://localhost:3000/static/js/main.chunk.js:1161:85)
      at App
      at ApolloProvider (http://localhost:3000/static/js/0.chunk.js:6087:19)
  
  Consider adding an error boundary to your tree to customize error handling behavior.
  Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
  console.&lt;computed&gt; @ 0.chunk.js:88061
  logCapturedError @ 0.chunk.js:80540
  update.callback @ 0.chunk.js:80568
  callCallback @ 0.chunk.js:72944
  commitUpdateQueue @ 0.chunk.js:72967
  commitLifeCycles @ 0.chunk.js:81172
  commitLayoutEffects @ 0.chunk.js:83829
  callCallback @ 0.chunk.js:64505
  invokeGuardedCallbackDev @ 0.chunk.js:64554
  invokeGuardedCallback @ 0.chunk.js:64614
  commitRootImpl @ 0.chunk.js:83563
  unstable_runWithPriority @ 0.chunk.js:96350
  runWithPriority$1 @ 0.chunk.js:71911
  commitRoot @ 0.chunk.js:83406
  performSyncWorkOnRoot @ 0.chunk.js:82748
  scheduleUpdateOnFiber @ 0.chunk.js:82300
  updateContainer @ 0.chunk.js:85837
  (anonymous) @ 0.chunk.js:86369
  unbatchedUpdates @ 0.chunk.js:82852
  legacyRenderSubtreeIntoContainer @ 0.chunk.js:86368
  render @ 0.chunk.js:86451
  (anonymous) @ main.chunk.js:1301
  ./src/index.js @ main.chunk.js:1376
  __webpack_require__ @ bundle.js:852
  fn @ bundle.js:151
  1 @ main.chunk.js:2488
  __webpack_require__ @ bundle.js:852
  checkDeferredModules @ bundle.js:46
  webpackJsonpCallback @ bundle.js:33
  (anonymous) @ main.chunk.js:1
  0.chunk.js:83683 Uncaught TypeError: Cannot destructure property 'getPosts' of 'data' as it is undefined.
      at Home (main.chunk.js:1427)
      at renderWithHooks (0.chunk.js:75555)
      at mountIndeterminateComponent (0.chunk.js:78317)
      at beginWork (0.chunk.js:79516)
      at HTMLUnknownElement.callCallback (0.chunk.js:64505)
      at Object.invokeGuardedCallbackDev (0.chunk.js:64554)
      at invokeGuardedCallback (0.chunk.js:64614)
      at beginWork$1 (0.chunk.js:84356)
      at performUnitOfWork (0.chunk.js:83192)
      at workLoopSync (0.chunk.js:83129)
      at renderRootSync (0.chunk.js:83095)
      at performSyncWorkOnRoot (0.chunk.js:82712)
      at scheduleUpdateOnFiber (0.chunk.js:82300)
      at updateContainer (0.chunk.js:85837)
      at 0.chunk.js:86369
      at unbatchedUpdates (0.chunk.js:82852)
      at legacyRenderSubtreeIntoContainer (0.chunk.js:86368)
      at Object.render (0.chunk.js:86451)
      at Module.&lt;anonymous&gt; (main.chunk.js:1301)
      at Module../src/index.js (main.chunk.js:1376)
      at __webpack_require__ (bundle.js:852)
      at fn (bundle.js:151)
      at Object.1 (main.chunk.js:2488)
      at __webpack_require__ (bundle.js:852)
      at checkDeferredModules (bundle.js:46)
      at Array.webpackJsonpCallback [as push] (bundle.js:33)
      at main.chunk.js:1
  </code></pre>
  <p>Please let me know the problem</p>