React：直到页面刷新才显示数据

Question

我目前正在使用 React 和 GraphQL 构建一个简单的 CRUD 工作流。在我创建一个对象（在本例中为 article，它只有一个 id、title 和 description）之后，我导航回 Index 页面其中显示所有当前创建的文章。我的问题是，在创建文章后，索引页面不显示创建的文章，直到我刷新页面。我正在使用 apollo 查询 graphql api 并禁用了缓存，所以我不确定为什么数据没有显示。我在 ArticlesIndex 的 componentDidMount 函数中设置了断点并确保它正在执行，并且在执行时，数据库确实包含新添加的 article。

当客户端执行检索所有文章的查询时，实际上我的服务器端从未被命中。我不确定是什么在缓存这些数据，以及为什么没有按预期从服务器检索它。

我的 ArticlesCreate 组件插入新记录并重定向回 ArticlesIndex 组件，如下所示：

handleSubmit(event) {  
    event.preventDefault();  
    const { client } = this.props;

    var article = {
      "article": {
        "title": this.state.title,
        "description": this.state.description
      }
    };

    client
    .mutate({ mutation: CREATE_EDIT_ARTICLE, 
      variables: article })
    .then(({ data: { articles } }) => {
        this.props.history.push("/articles");  
    })
    .catch(err => {
        console.log("err", err);
    });

  }
}

然后我的 ArticlesIndex 组件从数据库中检索所有文章，如下所示：

componentDidMount = () => {
    const { client } = this.props; //client is an ApolloClient
    client
    .query({ query: GET_ARTICLES })
    .then(({ data: { articles } }) => {
        if (articles) {
          this.setState({ loading: false, articles: articles });
        }
    })
    .catch(err => {
        console.log("err", err);
    });
};

并且我已经将 ApolloClient 设置为不像我的 App.js 中那样缓存数据，如下所示：

const defaultApolloOptions = {
  watchQuery: {
    fetchPolicy: 'network-only',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'network-only',
    errorPolicy: 'all',
  },
}

export default class App extends Component {
  displayName = App.name;

  client = new ApolloClient({
    uri: "https://localhost:44360/graphql",
    cache: new InMemoryCache(),
    defaultOptions: defaultApolloOptions
  });

  //...render method, route definitions, etc
}

为什么会这样，我该如何解决？

Answer 1

我可以看到您正在获取数据并在初始安装时设置组件状态。很可能当您重定向时它不会触发 componentDidMount 生命周期挂钩，因为它已经安装，如果这是问题请尝试使用 componentDidUpdate 生命周期挂钩，以便您的组件知道有更新并重新设置数据。

Answer 2

这似乎是 ApolloBoost 不支持 defaultOptions 的问题，如 in this github issue 所述。为了解决这个问题，我改变了：

const defaultApolloOptions = {
  watchQuery: {
    fetchPolicy: 'network-only',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'network-only',
    errorPolicy: 'all',
  },
}

export default class App extends Component {
  displayName = App.name;

  client = new ApolloClient({
    uri: "https://localhost:44360/graphql",
    cache: new InMemoryCache(),
    defaultOptions: defaultApolloOptions
  });

  //...render method, route definitions, etc
}

收件人：

const client = new ApolloClient({
  uri: "https://localhost:44360/graphql"
});

client.defaultOptions = {
  watchQuery: {
    fetchPolicy: 'network-only',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'network-only',
    errorPolicy: 'all',
  },
};

export default class App extends Component {
    //....
}

React：直到页面刷新才显示数据

React: Data not showing until page refreshes

apollo

reactjs

graphql

react-apollo

apollo-client