Клиент apollo: локальное состояние перезаписывается запросом?

У меня есть приложение, в котором используются:

react-apolloapollo-link-stateapollo-cache-persistapollo-link-error

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

Я воспроизвел проблему на Github здесь (https://github.com/deltaskelta/apollo-link-iss-573) с инструкциями о том, как увидеть, что происходит. Если кто-нибудь знает, что происходит, я был бы очень признателен!

Спасибо

Обновлено: полный код, вызывающий ошибку, размещен ниже

import { ApolloClient } from "apollo-client";
import { ApolloLink } from "apollo-link";
import { ApolloProvider, graphql } from "react-apollo";
import { CachePersistor } from "apollo-cache-persist";
import { InMemoryCache } from "apollo-cache-inmemory";
import { onError } from "apollo-link-error";
import { withClientState } from "apollo-link-state";
import PropTypes from "prop-types";
import React, { Component } from "react";
import gql from "graphql-tag";

export const resolvers = {
  Mutation: {
    setErrors: (_, { messages }, { cache }) => {
      const data = {
        errors: {
          __typename: "Errors",
          messages
        }
      };
      cache.writeData({ data });
      return null;
    }
  }
};

// create the cache
const cache = new InMemoryCache();

const persistor = new CachePersistor({
  cache,
  storage: window.localStorage,
  debug: true
});

// link to the local state cache
const stateLink = withClientState({
  cache,
  resolvers,
  defaults: {
    errors: {
      __typename: "Errors",
      messages: []
    }
  }
});

// link to intercept graphql errors and write them to the cache, this is almost like a
// middleware
const errorLink = onError(({ graphQLErrors, networkError }) => {
  var messages = []; // make a place to push all errors to

  // go through the network errors and graphql errors, push them to the errors array and
  // then write those errors to the cache
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, path }) => {
      messages.push(`Error: msg: ${message},  path: ${path}`);
    });
  }

  if (networkError) {
    messages.push(`Error: network: ${networkError}`);
  }

  const data = {
    errors: {
      __typename: "Errors",
      messages
    }
  };

  cache.writeData({ data });
});

// put both links in the frontend apollo client
const client = new ApolloClient({
  cache,
  link: ApolloLink.from([stateLink, errorLink]),
  connectToDevTools: true
});

client.onResetStore(stateLink.writeDefaults);

class Persistor extends React.Component {
  static propTypes = {
    children: PropTypes.object,
    persistor: PropTypes.object
  };

  componentDidMount() {
    this.props.persistor.restore().then(() => {
      console.info("restored");
    });
  }

  render() {
    return this.props.children;
  }
}

class App extends Component {
  render() {
    return (
      <ApolloProvider client = {client}>
        <Persistor persistor = {persistor}>
          <Errors />
        </Persistor>
      </ApolloProvider>
    );
  }
}

const RootComponent = ({ errors }) => {
  return (
    <div>
      Hello World
      {errors.map(e => <div>{e}</div>)}
    </div>
  );
};

RootComponent.propTypes = {
  errors: PropTypes.array
};

const Errors = graphql(
  gql`
    query GetErrors {
      errors @client {
        messages
      }
    }
  `,
  {
    props: ({ data }) => ({ errors: data.errors.messages }),
    options: {
      pollInterval: 1000 * 10
    }
  }
)(RootComponent);

export default App;

// TODO:
//
// - cause an error that is written to the cache
// - make a query to poll the error

Вопросы, требующие помощи по отладке («почему этот код не работает?») Должны включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для ее воспроизведения в самом вопросе. Ссылка на github неадекватна, поскольку любые изменения там сделают ваш вопрос и ответы бесполезными. Вопросы без четкой постановки проблемы не будут полезны другим читателям. См .: Как создать минимальный, полный и проверяемый пример.

Rob 27.03.2018 14:02

хорошо, я разместил код в вопросе

deltaskelta 27.03.2018 14:04

Это минимальный воспроизводимый пример? акцент на минимальный.

Rob 27.03.2018 14:06

да, для настройки требуется несколько компонентов и конструкторов, поэтому я изначально делал все это в репо

deltaskelta 27.03.2018 14:07

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

Pat 02.10.2018 19:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
5
733
0

Другие вопросы по теме