useLazyQuery

[msutkowski]

Introduces useLazyQuery, which allows users to opt-in to calling a query with arguments.

const [fetchThing, { data, isLoading, ...rest }] = api.endpoints.getPosts.useLazyQuery({refetchOnFocus, refetchOnReconnect, pollingInterval});

<button onClick={() => fetchThing({ with: 'variable', another: 'one' })}>Do a fetch</button>

Once a request is made, the query will stay subscribed to any changes while mounted in the scenario that there are other components mounted with the same query. If the arg that fetchThing is called with changes, it will perform a new request and then behave the same way. Additionally, we always unsubscribe an existing query before initiating a new one when the trigger is called.

[insert visual reference :D]

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5599c4f:

Sandbox	Source
React	Configuration
React Typescript	Configuration
rtk-query-demo	Configuration
svelte-app-rtk-simplequery-demo	Configuration

[github-actions]

size-limit report 📦

Path	Size
ESM full	9.91 KB (+0.11% 🔺)
ESM full (React)	11.24 KB (+2.43% 🔺)
createApi + setupListeners	9.03 KB (+0.17% 🔺)
createApi (React) + setupListeners	10.24 KB (+2.66% 🔺)
fetchBaseQuery	661 B (0%)
retry	271 B (0%)
ApiProvider	400 B (0%)
CJS minfied	15.37 KB (+0.07% 🔺)
CJS React minfied	16.94 KB (+2.04% 🔺)

[msutkowski]

Move arg into the hook call site.

[msutkowski]

Note: there is a bug in this. When the input args on a call get changed, we're currently leaving stale queries around. Need to clean this up.

[msutkowski]

Okay, remaining issues with this:

1. doing a forceUpdate in the ref as tried in this commit might be cleanest, but not sure: 53ed749
2. TS41Hooks need to be updated for useLazy${thing}Query?
3. fast refresh behavior isn't really working well with this approach, but i don't think there is a really good solution. being that we unsubscribe on unmount, we don't really have a good way to know thats whats happening so a user would have to refire the query. maybe i'm missing something tho

[msutkowski]

I think this looks good. I agree with everyone who says hooks can be hard :)