docs: fixup onResetStore docs, convert to hooks

[henryqdineen]

Found a couple issues with the existing onResetStore docs

• componentDidUnmount doesn't exists (componentWillUnmount does though)
• this.state.reset is always false and wasn't correctly being set
• It references the old @apollo/react-hoc module from react-apollo, which has not been mentioned if reading the docs in order

For this PR I also migrated to hooks since the HOCs are deprecate. Let me know if you would prefer it to be fixed up but still use the HOC. Thanks!

[jpvajda]

Thanks for this contribution! I noticed up the page (on line 49) we have another code sample which does use withApollo

export default withApollo(graphql(PROFILE_QUERY, {
  props: ({ data: { loading, currentUser }, ownProps: { client }}) => ({
    loading,
    currentUser,
    resetOnLogout: async () => client.resetStore(),
  }),
})(Profile));

We can probably update that as well in this PR, did you want to make that change?

[henryqdineen]

Thanks @jpvajda. I'm not super familiar with the graphql HOC. Would something like this work? I can update this branch.

export default function Profile() {
  const { data, loading, client } = useQuery(PROFILE_QUERY);

  return (
    <ProfileDisplay
      loading={loading}
      currentUser={data?.currentUser}
      resetOnLogout={async () => client.resetStore()}
    />
  );
}

[jpvajda]

@henryqdineen good question! I'll defer to the team on that one 😄 . cc @benjamn @hwillson @MrDoomBringer @alessbell

[MrDoomBringer]

Thanks for the PR @henryqdineen, I have some small suggestions but other than that this looks great!

[MrDoomBringer]

Would something like this work? I can update this branch.

@henryqdineen Not a blocking request, but it might be better to use something like this, purely because it could be a little easier for people to drop-in to existing code.

function Profile() {
    const { data, client } = useQuery(PROFILE_QUERY);
    return (
      <Fragment>
        <p>Current user: {data?.currentUser}</p>
        <button onClick={async ()=>client.resetStore()}>
            Log out
        </button>
      </Fragment>
    );
}

All the best,
Emmanuel, Intern :-)

[MrDoomBringer]

LGTM! @henryqdineen I went ahead and committed an update to that first example for client.resetStore, as it looked like you were alright with the suggestion. Thanks for the other changes.

All the best,
Emmanuel, Intern :-)