apollo-link-state
apollo-link-state copied to clipboard
Adding local data to a remote query makes remote data undefined
query ErrorTemplate {
people {
id
name
}
}
works.
query ErrorTemplate {
people {
id
name
}
foo @client
}
people
becomes undefined
Repro: https://github.com/lorensr/react-apollo-error-template/tree/remote-undefined
Related: #262 #193
I can confirm this is happening to me too, and I believe the only current workaround is something in the lines of
<Query query={SERVER_QUERY}>
<Query query={CLIENT_QUERY}>
which is quite cumbersome
@MiguelGPereira Yep, which is what I have been doing. But I am hitting different issues then, where client state received is stale after it has been updated and only updated on next render (one too late).
Also: beware of including any part of client state in both queries - it will blow up in your face (no client state will arrive at all).
Additionally: This has been happening for as long as I have used apollo-link-state, which was pretty much when it was published.
This has started to hurt so much that in my most recent project I have reverted to use unstate for local State instead of apollo-link-state.
I just realized that the fact that mixing local and remote state often leads to empty local state could be caused by the unintuitive behaviour of apollo-link-state reapplying default state when the query is refetched (https://github.com/apollographql/apollo-link-state/issues/268).
So it seems that maybe you can mix local and remote state but beware never to refetch the query!
For those of you coming here looking for a solution I wrote a little component that allows easy nesting of multiple <Query />
components:
import React, { Component } from "react";
import PropTypes from 'prop-types';
import { Query } from "react-apollo";
export default class Queries extends Component {
renderQueries(queries = [], lastData = {}, lastLoading = null, lastError = null) {
let query = queries.pop();
if(!query) {
return <this.props.children data={lastData} loading={lastLoading} error={lastError}/>;
}
return (
<Query query={query}>
{({ data, loading, error }) => {
let allData = {
...data,
...lastData,
};
let allLoading = lastLoading || loading;
let allError = error || lastError;
return this.renderQueries(queries, allData, allLoading, allError);
}}
</Query>
);
}
render() {
return this.renderQueries(this.props.queries);
};
}
Query.propTypes = {
queries: PropTypes.array,
};
It's not perfect but it might get you by until this issue is fixed.