React Apollo Query 使用 pollInterval 无限期地发出网络请求

Question

所以我运行遇到了 Apollo 的问题，我试图动态地 add/update/remove 到我的应用程序中的主题列表，但是我的 pollInterval 在我的 Query 不断发出网络请求，即使我的 Apollo 缓存中有数据。我知道有一些方法可以手动触发 refetch，但是在试用它之后，要按照我想要的方式获得它还有很多额外的步骤。我在这里遗漏了什么吗？

组件代码如下：

import React from 'react';
import { gql } from 'apollo-boost';
import { Query, Mutation } from 'react-apollo';
import TopicForm from "./TopicForm";
import { Link, withRouter} from "react-router-dom";


const REMOVE_TOPIC = gql`
    mutation REMOVE_TOPIC(
        $id: String!
    ) {
    removeTopic(id: $id) {
      id
    }
  }
`

const GET_TOPICS = gql`
{
    topics {
        id
        name
    }
}
`;

class Topics extends React.Component {


    removeTopic(id, removeTopicById) {
        removeTopicById({
            variables: {
                id
            }
        }).then(result => {
            // Redirect to main topics page
            this.props.history.push('/topics');
        })
    }

    componentDidMount() {
    }

    render() {
        const RemoveButton = props => {
            return <Mutation mutation={REMOVE_TOPIC}>
                {(removeTopicById, { loading }) => {
                    return <button type="button" onClick={(e) => {
                        e.preventDefault();
                        this.removeTopic(props.id, removeTopicById);
                    }}>X</button>
                }}
            </Mutation>
        }

        const TopicList = () => {
            return (<Query query={GET_TOPICS} pollInterval={40}>
                {(({ data: { topics }, loading }) => {
                    if (loading || !topics) {
                        return <div>Loading ...</div>;
                    }

                    return topics.map(({ id, name }) => {
                        return  <div><Link to={`/topics/${id}`}>{name}<RemoveButton id={id} /></Link></div>
                    })
                })
                }
            </Query>)
        }

        return (<div>
            {this.props.match.params.topicId ? <h2>Update Topic</h2> : <h2>Add Topic</h2>}
            <TopicForm topicId={this.props.match.params.topicId}/>
            <TopicList />
            </div>)
    }
}

export default withRouter(Topics)

我说的主要部分在TopicList函数里面

Answer 1

pollInterval 正在做它的本意

refetchQueries 并不太复杂。在这种情况下，我认为应该是：

<Mutation
    mutation={REMOVE_TOPIC}
    refetchQueries={[{ query: GET_TOPICS }]}

Answer 2

使用钩子，您可以执行以下操作：

例如使用 startPolling 和 stopPolling 依赖项：

  useEffect(() => {
    startPolling(10000);

    return () => {
      stopPolling();
    };
  }, [startPolling, stopPolling]);

这将每 10 秒重新获取一次，并在组件卸载时停止轮询。

React Apollo Query 使用 pollInterval 无限期地发出网络请求

React Apollo Query keeps making network requests indefinitely with pollInterval

apollo

reactjs

react-apollo