阿波罗突变重置称为状态

Question

我有一个 React-Apollo Mutation，当用户通过播放视频以某种方式前进时调用它。 React Player 每 2000 毫秒调用一次回调，当进度为 88% 时，我的突变被调用。在那之后called 是真的，没有更多的事情发生。

当用户重播视频时，我需要重置突变状态。 React Player 有对 onStart 和 onEnd 的回调，我可以在其中进行实际的重置，但我的问题是我似乎不知道该怎么做。

<Query query={GET_VIDEO} variables={queryVars}>
{({ error, loading, data, refetch }) => {
    return <Mutation
        mutation={VIDEO_WATCHED}
        variables={mutationVars}
        // refetchQueries={[{ query: GET_VIDEO, variables: queryVars }]}
        onCompleted={() => refetch()}
    >
        {(mutate, { called }) => {
            const onProgress = ({ played }) => {
                if (!called && played >= 0.88) {
                    mutate();
                }
            };
            return <VimeoPlayer
                url={video.url}
                onProgress={onProgress}
                progressInterval={2000}
            />;
        }}
    </Mutation>;
}}
</Query>;

我尝试在突变上使用refetchQueries，并在查询中使用refetch 来刷新我的突变，但没有骰子。

Answer 1

我通过使用 state 属性来跟踪突变是否被触发来解决这个问题。简单有效。

不过，我很想知道我最初的问题是否有答案。

function MyComponent() {
  const [completed, setCompleted] = useState(false);
  <Query query={GET_VIDEO} variables={queryVars}>
    {({ error, loading, data}) => {
        return <Mutation
            mutation={VIDEO_WATCHED}
            variables={mutationVars}
            onCompleted={() => refetch()}
        >
            {(mutate, { called }) => {
                const onProgress = ({ played }) => {
                    if (!completed && played >= 0.88) {
                        mutate();
                    }
                };
                return <VimeoPlayer
                    url={video.url}
                    onProgress={onProgress}
                    progressInterval={2000}
                    onEnded={() => setCompleted(true)}
                />;
            }}
        </Mutation>;
    }}
  </Query>;