Apollo 突变重置调用状态

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

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

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

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>;

Apollo 突变重置调用状态

Apollo mutation reset called state

reactjs

react-apollo