Question

所以我遇到了Apollo的问题，我试图在我的应用中动态添加/更新/删除主题列表，但是我的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查询通过pollInterval

2 个答案: