[API Concept] - Infinite Query API

[riqts]

This is a conceptual display of an API and how it would work inside RTKQ for an infinite Query. This is not a final implementation.
It is derived from the API for react query Infinite Query but with RTKQ's useInfiniteQuery hook etc and implementation.

disclaimer:
The typing and actual code for a library and implementation is bad, it basically just takes and repeats 90% of the query hook logic, the final implementation would more likely be an extension of the Query definition, but I wanted to completely separate it to make it more clear for feedback on the API.

Summary

useInfiniteQuery hook - works almost the same as useQuery

• New args:

  • takes an initial page param
  • takes an argument for getNextPage
  • takes an optional argument function for getPreviousPage

• New Returns:

  • data is now an object containing infinite query data: data.pages array containing the fetched pages and data.pageParams array containing the page params used to fetch the pages
  • fetchNextPage trigger function, similar to a lazyQuery trigger but combined with the querySubscription
  • fetchPreviousPage
  • hasNextPage - I haven't implemented it yet :D
  • hasPrevPage - I haven't implemented it yet :D
  • isFetchingNextPage
  • isFetchingPrevPage

• InfiniteQuery is a new EndpointDefinition

• Uses its own initiator, and then initiates a typical QueryThunk

• Additional logic added to querySlice that adds direction/param to the querySubState and acts as the discriminator for an InfiniteQuery (different to arg which acts as the set cache key)

• ExecuteEndpoint is changed to fetch every page from the pageParams that hasn't been fetched yet and add to the data object in the direction specified.

Still needs to be done:

• Tests - Lots
• Turn repeated types/functions into extensions of Query logic
• hasPrevPage & hasNextPage state
• Didn't add prevPage yet but I did add nextPage and it's the same thing
• Feedback - I have not used a middleware in any capacity, the querySlice just alters the substate and it uses a queryThunk otherwise. However, @phryneas mentioned a middleware is probably how it would be handled, and he's always right eventually, so I will need to be told what part is better handled there.

Open Questions

• Middleware appropriate here?
• Am I meant to be using merge still? Should the selector be handling the cache differently?
  • Currently it's just one query and the next page trigger continuously increments the cursor/pageParam but potentially we should be executing standard query for each PageParam and then selecting them all together?
• Is this API appropriate at all for RTKQ?
• Do I burn it all down?

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[netlify]

✅ Deploy Preview for redux-starter-kit-docs ready!

Name	Link
🔨 Latest commit	21d642f
🔍 Latest deploy log	https://app.netlify.com/sites/redux-starter-kit-docs/deploys/66371bc055f44f000844ad51
😎 Deploy Preview	https://deploy-preview-4393--redux-starter-kit-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[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 21d642f:

Sandbox	Source
rsk-github-issues-example	Configuration
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration
rtk-esm-cra	Configuration