0

This configuration creates behavior where data is refreshed only on full page refresh but it grabs data from cache if the page is opened through <NuxtLink to='/test' />

apollo.config.js

export default context => ({
  httpEndpoint: 'https://test.hasura.app/v1/graphql',
  getAuth () {
    return context.store.state.auth.token ? `Bearer ${context.store.state.auth.token}` : null
  },
})

test.vue

<template>
  <div v-if="users">
    users: <pre>{{ users }}</pre>
  </div>
</template>

<script>
import testQuery from '~/apollo/queries/test.graphql'

export default {
  apollo: {
    users: {
      query: testQuery,
      prefetch: true,
    },
  },
}
</script>

testQuery.graphql

query testQuery {
  users {
    phone
  }
}

The problem can be solved by using different fetch policy:
fetchPolicy: 'no-cache // doesn't cache the data'
fetchPolicy: 'netowrk-only' // executes query without checking the cache result gets stored in cache

however, that creates hydration problems even if prefetch: true

How should I prevent inconsistencies with the server data?

kissu
  • 40,416
  • 14
  • 65
  • 133
Evaldas B
  • 2,464
  • 3
  • 17
  • 25
  • Do you want to still keep the Apollo cache? If not, use `fetchPolicy: 'network-only'`. – kissu Sep 13 '21 at 10:23
  • Don't have a need to use cache. But `fetchPolicy: 'network-only'` and `fetchPolicy: 'no-cache'` creates hydration errors – Evaldas B Sep 13 '21 at 10:26
  • Hydration errors? Can you tell us more on this one? – kissu Sep 13 '21 at 10:27
  • First, fetch from the server returns no data even if `prefetch: true`. Hydration error: `The client-side rendered virtual DOM tree is not matching server-rendered content.` – Evaldas B Sep 13 '21 at 10:29
  • Not sure what you're doing in your `fetch()` hook, meanwhile the second issue is related to this: https://stackoverflow.com/a/67978474/8816585 And it's the same, with no code we can't help you find the actual issue here. – kissu Sep 13 '21 at 10:31
  • Read the Lichter article a while ago. The hydration error is caused because the server is getting different data than the client does. just want to figure what is the reason for that. Not using native Nuxt `fetch()` the request is made with the code you see in the question. – Evaldas B Sep 13 '21 at 10:47
  • Wrapping code that causes hydration errors is not a solution here, because in this case the server see the same data as the client does – Evaldas B Sep 13 '21 at 10:49
  • Please `@kissu` me if you want me to be notified. Never told that this was a solution. Can you please show us the rest of your code? Hard to know what you're doing with your Apollo here. – kissu Sep 13 '21 at 10:50
  • Also, do you see the correct data being fetch here (double-check in the network tab)? Isn't it a matter of data not being loaded yet? Maybe try to see if `users.length` since an empty array is truthy. – kissu Sep 13 '21 at 10:54
  • Also, the documentation tells you that you do have a friendly helper: https://apollo.vuejs.org/guide/apollo/queries.html#loading-state You should probably try this one out: `
    Loading...
    `     – kissu Sep 13 '21 at 10:57

0 Answers0