Question

我有一个使用的应用：

react-apollo apollo-link-state apollo-cache-persist apollo-link-error

当我尝试向查询添加pollInterval时，我遇到了一个奇怪的问题。 pollInterval导致本地缓存状态的覆盖重写为默认值。我不确定这是否是由pollInterval直接引起的，但我一直在解决这个问题一段时间没有运气。

我在这里（https://github.com/deltaskelta/apollo-link-iss-573）在Github上复制了这个问题，并说明了如何查看正在发生的事情。如果有人知道发生了什么，我会非常感激！

由于

编辑：导致错误的完整代码发布在

下面

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.log("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

apollo客户端：本地状态被查询覆盖？

0 个答案: