Fetch policy no-cache returns null data
See original GitHub issueIntended 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
- Visit this runkit and fork it: https://runkit.com/razorx/apollo-client-no-cache/4.0.1
- Run the first box to initialize.
- Run the second box to run a query with the default fetch policy: the Promise will eventually resolve with good data (
data: {...}
). (expected) - 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) - Run the second box to run a query with the
network-only
fetch policy: the Promise will eventually resolve with good data. (expected)
Browser
- Visit https://codesandbox.io/s/znx9n9x943
- 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 withno-cache
fetch policy: returnsnull
data. (unexpected)clientC
works with default fetch policy (returns non-null data), then the query is repeated again withclientC
, this time withno-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:
- Created 6 years ago
- Reactions:25
- Comments:34 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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 fieldpicture
, then result will be: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?
Have same issue on apollo-client@2.4.12, why this is closed?