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: "$10"
    },
    {
      __typename: "item",
      name: "Product 2",
      price: "$20"
    },
    {
      __typename: "item",
      name: "Product 3",
      price: "$30"
    }
  ]
};


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链接状态下存储数据数组

1 个答案: