question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fetch policy no-cache returns null data

See original GitHub issue

Intended outcome:

Run a query and receive non-null data when using fetchPolicy: 'no-cache'. Tested on Node and in Browser.

client.query({query, fetchPolicy: 'no-cache'})

Actual outcome:

The data property is null:

{
  data: null
  loading: false
  networkStatus: 7
  stale: true
}

How to reproduce the issue:

Node.js

  1. Visit this runkit and fork it: https://runkit.com/razorx/apollo-client-no-cache/4.0.1
  2. Run the first box to initialize.
  3. Run the second box to run a query with the default fetch policy: the Promise will eventually resolve with good data (data: {...} ). (expected)
  4. Run the second box to run a query with the no-cache fetch policy: the Promise will eventually resolve with no data (data: null). (unexpected)
  5. Run the second box to run a query with the network-only fetch policy: the Promise will eventually resolve with good data. (expected)

Browser

  1. Visit https://codesandbox.io/s/znx9n9x943
  2. Run the code with the “refresh” button in the right pane.
    • clientA works with default fetch policy: returns non-null data. (expected)
    • clientB does not work with no-cache fetch policy: returns null data. (unexpected)
    • clientC works with default fetch policy (returns non-null data), then the query is repeated again with clientC, this time with no-cache fetch policy, and the data returns non-null! (what?)

Version

  • apollo-client@2.2.3

Contents of the runkit for reference

require('isomorphic-fetch')
require('graphql')
const { ApolloClient } = require('apollo-client')
const { HttpLink } = require('apollo-link-http')
const { InMemoryCache } = require('apollo-cache-inmemory')
const gql = require('graphql-tag')

const uri = 'https://graphql-pokemon.now.sh/graphql'

const query = gql`{
  pokemon(name: "Pikachu") {
    id
    number
    name
  }
}`

const client = new ApolloClient({
  link: new HttpLink({uri}),
  cache: new InMemoryCache()
})

client.query({query})
  .then(data => console.log(data))
  .catch(error => console.error(error))
  
// => gives good data
  
 const clientNoCache = new ApolloClient({
  link: new HttpLink({uri}),
  cache: new InMemoryCache()
})

clientNoCache.query({query, fetchPolicy: 'no-cache'})
  .then(data => console.log(data))
  .catch(error => console.error(error))
  
// => gives NULL data

const clientNetworkOnly = new ApolloClient({
  link: new HttpLink({uri}),
  cache: new InMemoryCache()
})

clientNoCache.query({query, fetchPolicy: 'network-only'})
  .then(data => console.log(data))
  .catch(error => console.error(error))
  
// => gives good data

Contents of the browser example for reference

import { gql, graphql } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo';
import App from './App';

const uri = 'https://qkv3mq9rp.lp.gql.zone/graphql'

const clientA = new ApolloClient({
  link: new HttpLink({uri}),
  cache: new InMemoryCache()
});

const clientB = new ApolloClient({
  link: new HttpLink({uri}),
  cache: new InMemoryCache()
});

const clientC = new ApolloClient({
  link: new HttpLink({uri}),
  cache: new InMemoryCache()
});

const query = gql`{
  people {
    id
    name
  }
}
`

clientA.query({query})
  .then(data => document.write('A cache<br \><br \>' + JSON.stringify(data)))
  .then(() => clientB.query({query, fetchPolicy: 'no-cache'}))
  .then(data => document.write('<br \><br \>B no-cache<br \><br \>' + JSON.stringify(data)))
  .then(() => clientC.query({query}))
  .then(data => document.write('<br \><br \>C cache<br \><br \>' + JSON.stringify(data)))
  .then(() => clientC.query({query, fetchPolicy: 'no-cache'}))
  .then(data => document.write('<br \><br \>C no-cache<br \><br \>' + JSON.stringify(data)))
  .catch(error => console.error(error))

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:25
  • Comments:34 (3 by maintainers)

github_iconTop GitHub Comments

37reactions
jdorleanscommented, Dec 19, 2018

After several trails I figured data is always null whenever there are missing fields from the projected result. For instance, if we’re supposed to query an user like: user { uuid email picture } and for some reason the server does not return field picture, then result will be:

{
  data: null
  loading: false
  networkStatus: 7
  stale: true
}

I’ve also noticed we’ll get a Missing field picture warning on the console.

In my particular case, my backend never serializes null values. Since user’s picture and many other fields are optional (nullable), we constantly face this problem.

Does anyone have an idea why those missing fields break the result causing this issue?

18reactions
standycommented, Jan 31, 2019

Have same issue on apollo-client@2.4.12, why this is closed?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Queries - Apollo GraphQL Docs
If all data is available locally, useQuery returns that data and doesn't query your GraphQL server. This cache-first policy is Apollo Client's default...
Read more >
Understanding Apollo Fetch Policies | by Galen Corey - Medium
The opposite of no-cache, this fetch policy avoids making any network requests. If the data you are querying is not available in the...
Read more >
Flutter: graphql_flutter FetchPolicy.noCache returns cached ...
I'm using the graphql_flutter package and am having an issue with what seems to be caching. The client passes over cached data from...
Read more >
React Apollo: Understanding Fetch Policy with useQuery
Prioritizes consistency with server data, but can't provide a near-instantaneous response when cached data is available. no-cache, Similar to ...
Read more >
Queries - Vue Apollo
Fetching data involves executing query operations using standard GraphQL ... save to cache. no-cache : return result from network, fail if network call ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found