Reactjs React Apollo Query以轮询间隔无限期地发出网络请求

因此，我在Apollo上遇到了一个问题，我试图在我的应用程序中动态添加/更新/删除主题列表，但是我的

Query

中的

pollInterval

不断地发出网络请求，即使我的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)

从“React”导入React；
从“阿波罗助推”导入{gql}；
从'react apollo'导入{Query，Mutation}；
从“/TopicForm”导入TopicForm；
从“react router dom”导入{Link，withRouter}；
const REMOVE_TOPIC=gql`
变异删除主题(
$id:String！
) {
removeTopic（id:$id）{
身份证件
}
}
`
const GET_TOPICS=gql`
{
话题{
身份证件
名称
}
}
`;
类主题扩展了React.Component{
removeTopic（id，removeTopicById）{
移除opicbyd({
变量：{
身份证件
}
})。然后（结果=>{
//重定向到主主题页
this.props.history.push（'/topics'）；
})
}
componentDidMount（）{
}
render（）{
const RemoveButton=props=>{
返回
{（removetopicbyd，{loading}）=>{
返回{
e、 预防默认值（）；
this.removeTopic（props.id，removeTopicById）；
}}>X
}}
}
常量主题列表=（）=>{
返回(
{（{data:{topics}，loading}）=>{
如果（加载| |！主题）{
返回装载。。。；
}
返回topics.map（{id，name}）=>{
返回{name}
})
})
}
)
}
返回(
{this.props.match.params.topicId？更新主题：添加主题}
)
}
}
使用路由器导出默认值（主题）

---

我所说的主要部分是在

主题列表

函数中

pollInterval正在做它应该做的事情

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

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

---

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

使用startPolling和Stopperling依赖项，例如：

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

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

这将每10秒重新蚀刻一次，并在卸载组件时停止滚动
 如果您不想轮询服务器，那么为什么要包含轮询间隔？你到底想实现什么？基本上，当列表中的某个项目被删除时，它会自动更新UI，不再显示列表中的该元素。我已经让它将
refetch
函数传递给remove button组件，然后执行它，但不知道这是否是一个好模式有没有办法也使用
refetchQueries
变量，比如
id
？确实有