docs: Update query-cancellation.md

[nico-hyperjump]

Add sample code to manually cancel a query.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tannerlinsley/react-query/7yp7txhfo
✅ Preview: https://react-query-git-patch-1.tannerlinsley.vercel.app

[TkDodo]

I am not sure if setting the query key to empty string is advice we should be giving:

1. I tried it in a codesandbox and it doesn't seem to work, maybe I did it wrong? Have a look: https://codesandbox.io/s/dazzling-hugle-hbgcf

2. The docs mention:

By default, queries that become inactive before their promises are resolved are simply ignored instead of canceled.

I also tried setting the query to enabled: false with some local state, but this also doesn't cancel the request.

While typing this, I found out that all you need is queryCache.cancelQueries('myKey') to cancel a query, so if you want to do this on a button click, that seems like the easiest way: https://codesandbox.io/s/thirsty-mirzakhani-4den7

[nico-hyperjump]

it seems like you're using react-query 3.2.0. I tested using 2.26.3 here https://codesandbox.io/s/inspiring-northcutt-scc73?file=/src/App.js, and I need to also set enabled to false in addition to setting the key to empty string.

I couldn't find QueryClient if I searched in the doc. Is that new?

[TkDodo]

yes, QueryClient is v3 (beta), it's QueryCache in v2: https://react-query.tanstack.com/docs/api#querycachecancelqueries

sorry for the confusion 🙃

[nico-hyperjump]

Ah you're right. I actually tried cache.cancelQueries in my sample project before but it didn't work. But maybe I did something wrong. I tried again and cache.cancelQueries can cancel the request. I've updated the doc if you still think it's worth mentioning in the doc.

[tannerlinsley]

Please add this to the beta branch as well?

[tannerlinsley]

🎉 This PR is included in version 2.26.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tannerlinsley]

🎉 This PR is included in version 3.2.0-beta.32 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tannerlinsley]

🎉 This PR is included in version 2.26.4 🎉

The release is available on:

• npm package (@release-2.x dist-tag)
• GitHub release

Your semantic-release bot 📦🚀