writeToStore: Missing field __typename

Intended outcome:

I wanted a warning not to be displayed.

Actual outcome:

A warning was displayed on the console.

writeToStore.js:106 Missing field __typename in { “edges”: [ { “node”: { “id”: “2789”, “__typename”: “Shop” },

(anonymous) @ writeToStore.js:106 writeSelectionSetToStore @ writeToStore.js:89 writeFieldToStore @ writeToStore.js:200 (anonymous) @ writeToStore.js:96 writeSelectionSetToStore @ writeToStore.js:89 writeResultToStore @ writeToStore.js:69 replaceQueryResults @ replaceQueryResults.js:13 data @ store.js:133 apolloReducer @ store.js:46 combination @ combineReducers.js:120 dispatch @ createStore.js:165 (anonymous) @ ApolloClient.js:174 (anonymous) @ store.js:18 ObservableQuery.updateQuery @ ObservableQuery.js:223 (anonymous) @ ObservableQuery.js:142 ```

How to reproduce the issue:

I used such a code.

import React from 'react'
import ReactDOM from 'react-dom'

import { ApolloClient, createNetworkInterface, ApolloProvider } from 'react-apollo';

const client = new ApolloClient();

class ShopList extends React.Component {
  render() {
    if (this.props.shops) {
      return (
        <div>
          { this.props.shops.edges.map((edge) =>
            <div key={edge.node.id}>{edge.node.id}</div>
          )}
          <button onClick={this.props.loadMoreEntries} >Load More</button>
        </div>
      )
    } else {
      return (<div>Loading...</div>)
    }
  }
}

import { gql, graphql } from 'react-apollo';

const ShopsQuery = gql`
  query Shops($cursor: String) {
    shops(first: 30, after: $cursor) {
      edges {
        node {
          id
        }
      }
      pageInfo {
        endCursor
        hasNextPage
      }
    }
  }
`;

const AreasWithData = graphql(ShopsQuery, {
  props({ data: { loading, shops, fetchMore } }) {
    return {
      loading,
      shops,
      loadMoreEntries: () => {
        return fetchMore({
          query: ShopsQuery,
          variables: {
            cursor: shops.pageInfo.endCursor
          },
          updateQuery: (previousResult, { fetchMoreResult }) => {
            const newEdges = fetchMoreResult.shops.edges;
            const pageInfo = fetchMoreResult.shops.pageInfo;
            return {
              shops: {
                edges: [...previousResult.shops.edges, ...newEdges],
                pageInfo,
              },
            };
          },
        });
      },
    };
  },
})(ShopList);

ReactDOM.render(
  <ApolloProvider client={client}>
    <AreasWithData />
  </ApolloProvider>,
  document.getElementById('root')
)

Could you advise me on this issue?

[helfer]

Hi @yoneapp, you need to include __typename as follows in the result you return from updateQuery:

              shops: {
                __typename: previousResult.shops.__typename,
                edges: [...previousResult.shops.edges, ...newEdges],
                pageInfo,
              },

[cooperka]

@natterstefan This confused me also 🙂 The difference is that in the examples you linked to, the data is being returned from GraphQL and thus already has __typename defined on it. If you pass in your own custom data, you’ll have to add __typename yourself.