Adding local data to a remote query makes remote data undefined

[lorensr]

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

[mpgon]

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

[barbalex]

@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.

[barbalex]

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 (#268).

So it seems that maybe you can mix local and remote state but beware never to refetch the query!

[samheutmaker]

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.