Apollo mutation reset called state

user_203093 0
Viewed 1008

I have an React-Apollo Mutation that is called when a user progresses a certain way through a playing video. The React Player invokes a callback every 2000ms, and when progress is 88% my mutation is called. After that called is true and nothing more happens.

I need to reset the mutation state when the user replays the video. React Player has callbacks for onStart and onEnd where I can do the actual reset, but my issue is I cannot seem to find out how to do it.

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

I have tried using refetchQueries on the mutation and refetch from the query to refresh my mutation, but no dice.

react-apollo reactjs
1 Answers

I solved this by useing a state property to track whether the mutation had been triggered. Simple and effective.

I would be interested in knowing if my original question has an answer, though.

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