Хранение массивов данных в Apollo Link State - PullRequest
Новая
       17

Хранение массивов данных в Apollo Link State

0 голосов
/ 17 ноября 2018

Я новичок в Apollo и столкнулся с проблемой, которую я не знаю, как искать в Интернете.

Моя цель - сохранить массив объектов в apollo-link-state, которым я бы былвозможность доступа через запросы из любого места в моем приложении React.Когда я пытаюсь получить доступ к одной строке из состояния Аполлона, это работает, но когда я пытаюсь получить доступ к массиву объектов, я получаю некоторые странные записи в консоли, и объекты появляются как неопределенные.

Вот упрощенный кодПример проблемы с песочницей, с которой я столкнулся: 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;

Еще раз спасибоза любую помощь, которую вы можете оказать!Я предполагаю, что я делаю ошибку новичка, и кто-то сразу поймет, почему это происходит.

1 Ответ

0 голосов
/ 18 ноября 2018

Вам необходимо добавить набор выбора для itemsInCart. Ключ не в том, что это массив, а в том, что он разрешается в объект (или массив объектов), что означает, что вы должны указать, какие поля в этих объектах вы запрашиваете. Если бы вы сделали это для запроса на стороне сервера, ваш запрос фактически взорвался бы, но из-за того, что apollo-link-state выводит состояние из значений по умолчанию, он в итоге просто переходит в неопределенное состояние. 

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