在 Apollo Link 状态中存储数据数组

Question

我是 Apollo 的新手，运行遇到了一个问题，我不确定如何在线搜索。

我的目标是在 apollo-link-state 中存储一个对象数组，我可以从我的 React 应用程序中的任何地方通过查询访问这些对象。当我尝试从 Apollo 的状态访问单个字符串时，它可以工作，但是当我尝试访问对象数组时，我在控制台中得到一些奇怪的条目，并且这些对象未定义。

这是我遇到的问题的简化代码沙箱示例： https://codesandbox.io/s/xj8mr75nxw

任何帮助或想法将不胜感激！

为了永久记录，我将显示以下代码：

index.js:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { ApolloProvider } from "react-apollo";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import Client from "./Client";


class Root extends Component {
  render() {
    return (
      <ApolloProvider client={Client}>
        <Query query={CART_QUERY}>
          {({ data }) => {
            const { test, itemsInCart } = data;

            // Why isn't the data coming in the way I expect?
            // test works
            console.log(test);
            // itemsInCart does not... Why?
            console.log(itemsInCart);

            return (
              <div>
                {itemsInCart.map((product, i = 0) => (
                  <div style={{ margin: "50px 20px" }} key={i++}>
                    <p>{`Name is: ${product.name}`}</p>
                    <p>{`Price is: ${product.price}`}</p>
                  </div>
                ))}
              </div>
            );
          }}
        </Query>
      </ApolloProvider>
    );
  }
}


const CART_QUERY = gql`
  query product {
    test @client
    itemsInCart @client
  }
`;


ReactDOM.render(<Root />, document.getElementById("root"));

Client.js:

import ApolloClient from "apollo-boost";


const defaultState = {
  // It works to pull this string into my app
  test: "this is a test string",
  // This is the array I want to pull into my app. Not working...
  itemsInCart: [
    {
      __typename: "item",
      name: "Product 1",
      price: ""
    },
    {
      __typename: "item",
      name: "Product 2",
      price: ""
    },
    {
      __typename: "item",
      name: "Product 3",
      price: ""
    }
  ]
};


const Client = new ApolloClient({
  uri: "",
  clientState: {
    defaults: defaultState,
    resolvers: {}
  }
});


export default Client;

再次感谢您提供的任何帮助！我的猜测是我犯了一个菜鸟错误，有人会立即知道为什么会这样。

Answer 1

您需要为 itemsInCart 添加一个选择集。关键不在于这是一个数组，而是它解析为一个对象（或一个对象数组），这意味着您必须指定您请求的那些对象的哪些字段。如果您为服务器端查询执行此操作，您的查询实际上会崩溃，但由于 apollo-link-state 从默认值派生状态的方式，它最终只会解析为未定义。

const CART_QUERY = gql`
  query product {
    test @client
    itemsInCart @client {
      name
      price
    }
  }
`;

在 Apollo Link 状态中存储数据数组

Storing arrays of data in Apollo Link State

apollo

react-apollo

apollo-client