feat(vue-query): add support for infiniteQueryOptions

[DavideSegullo]

The goal of this PR is to support the infiniteQueryOptions utility as it already does for react: https://tanstack.com/query/latest/docs/framework/react/reference/infiniteQueryOptions

TODO:

• [x] Add tests

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Apr 14, 2024 6:59pm

[nx-cloud[bot]]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 3f55dbe11b30e2803c75a05daded3639c2eaa054. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx affected --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build,test:attw --parallel=3

---

Sent with 💌 from NxCloud.

[codesandbox-ci[bot]]

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 3f55dbe11b30e2803c75a05daded3639c2eaa054:

Sandbox	Source
@tanstack/query-example-angular-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[DavideSegullo]

Hola @TkDodo When you can, could I get some feedback on this PR? Thank you so much!

[XantreDev]

It also do not exist for solid-query. Maybe it makes sense to add function type to the core package for easier reuse?

[DavideSegullo]

It also do not exist for solid-query. Maybe it makes sense to add function type to the core package for easier reuse?

Idk if you can share the implementation, some type for example on vue are constrained to vue types, do you have any ideas?

[XantreDev]

Probably I need to make contribution with the 95% the same copy pasted code. Because there is not actual logic - only types that changes from framework to framework For solid js:

const options = queryOptions(() => ({
  queryKey: ['sadf', 'sadf'],
  queryFn: () => Promise.resolve([1,2])
}))

const query = createQuery(() => ({
  // awakward, if we use key factroy it willl be factory.options({ ... })()
  ...options(),
  select: it => it[0]
}))

Oh seems to be now implementations changed and it just uses plain object, not callback

[XantreDev]

Btw, in this implementation and react implementation pageParams has always unknown[] type Is it desirable behvaiour?

[DavideSegullo]

Btw, in this implementation and react implementation pageParams has always unknown[] type Is it desirable behvaiour?

Uhm I just followed what was being done on react

[TkDodo]

pageParams returned from useInfiniteQuery has unknown as type, yes. There isn't much need to use those during rendering and it was a quick implementation to not have to add more type parameters.

[XantreDev]

I see. Problem is that query-core InifiniteQueryResult do have no TPageParam generic argument

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 40.99%. Comparing base (93674fe) to head (3f55dbe). Report is 129 commits behind head on main.

:exclamation: Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7257      +/-   ##
==========================================
- Coverage   41.42%   40.99%   -0.44%     
==========================================
  Files         184      183       -1     
  Lines        7331     7370      +39     
  Branches     1531     1534       +3     
==========================================
- Hits         3037     3021      -16     
- Misses       3889     3938      +49     
- Partials      405      411       +6     

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	∅ <ø> (∅)
@tanstack/angular-query-experimental	86.46% <0.00%> (ø)
@tanstack/eslint-plugin-query	85.29% <100.00%> (ø)
@tanstack/query-async-storage-persister	43.85% <100.00%> (-5.35%)	:arrow_down:
@tanstack/query-broadcast-client-experimental	∅ <ø> (∅)
@tanstack/query-codemods	0.00% <0.00%> (ø)
@tanstack/query-core	92.86% <79.59%> (-0.40%)	:arrow_down:
@tanstack/query-devtools	3.92% <0.00%> (-0.02%)	:arrow_down:
@tanstack/query-persist-client-core	57.73% <ø> (ø)
@tanstack/query-sync-storage-persister	82.50% <ø> (ø)
@tanstack/react-query	92.77% <100.00%> (ø)
@tanstack/react-query-devtools	10.71% <ø> (ø)
@tanstack/react-query-next-experimental	∅ <ø> (∅)
@tanstack/react-query-persist-client	100.00% <ø> (ø)
@tanstack/solid-query	79.32% <70.90%> (-2.95%)	:arrow_down:
@tanstack/solid-query-devtools	∅ <ø> (∅)
@tanstack/solid-query-persist-client	100.00% <ø> (ø)
@tanstack/svelte-query	62.68% <100.00%> (ø)
@tanstack/svelte-query-devtools	∅ <ø> (∅)
@tanstack/svelte-query-persist-client	100.00% <100.00%> (ø)
@tanstack/vue-query	71.17% <91.30%> (+0.36%)	:arrow_up:
@tanstack/vue-query-devtools	∅ <ø> (∅)