[WIP] feat: update `@ngneat/query` to use the newest `@tanstack/query` version #117

luii · 2023-10-29T18:40:42Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/ngneat/query/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

What is the current behavior?

Current behavior reflects still v4 of @tanstack/react-query's api style

Issue Number: #116

What is the new behavior?

New behavior reflects v5 of @tanstack/react-query's api style

Added the InfiniteData Interface (exported type from @tanstack/query-core) to the InfiniteQueryService return type to reflect what is actually being returned
TError now defaults to DefaultError (exported type from @tanstack/query-core) instead of unknown
Adjusted the shipped operators to reflect changes made by tanstack
Refactored the playground to the newest api changes
- Removed @ngneat/subscribe as dependency to illustrate that the code can be used without it and used *ngIf and AsyncPipe instead

Does this PR introduce a breaking change?

[x] Yes
[ ] No

Update the version of @tanstack/react-query, @tanstack/query-core and @tanstack/react-query-devtools to the neweset version
Removed all overloads with the exception of the object params, from InfiniteQueryService, QueryService

Other information

... `@tanstack/react-query-devtools` version to `5.4.3`

Adjusts Types to reflect the new `@tanstack/react-query` (in v5) BREAKING CHANGE: 🧨 Removed all overloads with the exception of the object style, like `@tanstack/react-query` (in v5) now requires you to ✅ Closes: 116

stackblitz · 2023-10-29T18:40:44Z

Run & review this pull request in StackBlitz Codeflow.

luii · 2023-10-29T18:45:21Z

packages/ng-query/src/lib/infinite-query.ts

    return buildQuery(
      this.instance,
      InfiniteQueryObserver as typeof QueryObserver,
-      parsedOptions
+      options as any


@NetanelBasal For now i typed this as any since i dont really know how to convert between them, maybe a bit help would be great.

You still need multiple overloads. See for example the svelte version:
https://github.com/TanStack/query/blob/v5.4.2/packages/svelte-query/src/createQuery.ts

luii · 2023-10-29T18:46:16Z

packages/ng-query/src/lib/query.ts

    return buildQuery(
      this.instance,
      QueryObserver,
-      parsedOptions
+      options as QueryOptions


Same for this conversion, i'd say this one is not as bad as the infinite query one but still what would you say?

See https://github.com/TanStack/query/blob/v5.4.2/packages/svelte-query/src/createInfiniteQuery.ts

uhhm, i think the links got mixed up, the createQuery overloads from the svelte adapter are the same, both have the initialData defined or undefined overload. was this intentionally?

Yes, we should copy the same overload and only change the queryFn and return data

NetanelBasal

In general I recommend to see that the types and overloads are equal to one of the existing adapters such as svelte or vue js

NetanelBasal · 2023-10-29T19:20:52Z

package.json

-    "@ngneat/subscribe": "^3.0.2",
-    "@tanstack/react-query": "^4.12.0",
-    "@tanstack/react-query-devtools": "^4.12.0",
+    "@tanstack/react-query": "^5.4.3",


There is no need to use the react version anymore. You can do what he did here:

https://github.com/TanStack/query/pull/6195/files#diff-d3075a62994bf33ff94f30a28f5caac8e1128726d8df1dc70ae0df7b6c209918

NetanelBasal · 2023-10-29T19:22:32Z

packages/ng-query/src/lib/infinite-query.ts

    return buildQuery(
      this.instance,
      InfiniteQueryObserver as typeof QueryObserver,
-      parsedOptions
+      options as any


You still need multiple overloads. See for example the svelte version:
https://github.com/TanStack/query/blob/v5.4.2/packages/svelte-query/src/createQuery.ts

NetanelBasal · 2023-10-29T19:23:32Z

packages/ng-query/src/lib/query.ts

    return buildQuery(
      this.instance,
      QueryObserver,
-      parsedOptions
+      options as QueryOptions


See https://github.com/TanStack/query/blob/v5.4.2/packages/svelte-query/src/createInfiniteQuery.ts

remove react as dependency and use `@tanstack/query-devtools`

and expose provider in barrel export

`mutation-result`

NetanelBasal · 2023-11-04T17:28:55Z

@luii I already starts the refactoring. Do you want to collaborate? I'm actually writing it from scratch. Already have the base query and infinity done.

luii · 2023-11-04T17:32:18Z

@NetanelBasal oh okay, i havent seen that, sorry that i havent done anything since last week, i was really busy with work. if you have something i should do/can do, then yeah of course

NetanelBasal · 2023-11-04T17:39:47Z

The question is how much time you have? because I want to close this version in two weeks most.

luii · 2023-11-04T17:48:25Z

Only this week was rough, next and the week after that should be fine, if something comes up i will let you know in advance on the end of monday

NetanelBasal · 2023-11-04T17:50:21Z

Cool, let me see what I can give you and I'll let you know. Thanks

NetanelBasal · 2023-11-04T20:50:26Z

Hi,

These are the new changes:

queryFn is the same as the original function. To work with observables you can use the toPromise function. See the services.
We know expose as signal and and result$ observable
Changed mapResults to intersectResults and make it more aligned with combineLatest signature (i.e both array and object)

Missing things that you can do:

Add injectIsFetching and injectIsMutating ( use the new convention, see query)
Mutation API
Docs update
More examples in the playground

You can work on the next branch. LMK if it's ok and you can do it.

luii added 6 commits October 29, 2023 17:10

chore(playground): 🤖 bump query,devtools version to 5.4.3

1d9bf78

chore(query): 🤖 bump @tanstack/query-core to 5.4.3

c2d4c65

chore(devtools): 🤖 bump @tanstack/react-query and

9607fef

... `@tanstack/react-query-devtools` version to `5.4.3`

refactor(playground): 💡 the playground to use the new api

1d602a0

docs(general): 📘 update the README.md to reflect the changes

25d3467

luii changed the title ~~[WIP]: feat: Update~~ [WIP] feat: update @ngneat/query to use the newest @tanstack/query version Oct 29, 2023

chore(general): 🤖 remove @ngneat/subscribe as dependency

42c61e0

luii commented Oct 29, 2023

View reviewed changes

fix(query): 🐞 make isFetching filters optional

a248b92

NetanelBasal reviewed Oct 29, 2023

View reviewed changes

luii added 8 commits November 4, 2023 18:02

chore(devtools): 🤖 update dependencies

7a6a40e

remove react as dependency and use `@tanstack/query-devtools`

feat(devtools): 🔥 add provideQueryClientDevTools

d21fc02

and expose provider in barrel export

fix(playground): 🐞 change isLoading to isPending

a0d0471

chore(general): 🤖 remove react as dependency from the project

d5b4153

refactor(query): 💡 adjust typings of all major query functions

8e3dac1

test(query): 🥳 fix broken tests

fcab1cb

fix(query): 🐞 change isLoading to isPending on

f88e42e

`mutation-result`

refactor(playground): 💡 update playground to the newest changes

6b3f2db

NetanelBasal closed this Nov 4, 2023

luii deleted the feature/116-tanstack-query-v5-update branch November 7, 2023 19:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] feat: update `@ngneat/query` to use the newest `@tanstack/query` version #117

[WIP] feat: update `@ngneat/query` to use the newest `@tanstack/query` version #117

luii commented Oct 29, 2023 •

edited

Loading

stackblitz bot commented Oct 29, 2023

luii Oct 29, 2023

NetanelBasal Oct 29, 2023

luii Oct 29, 2023

NetanelBasal Oct 29, 2023

luii Oct 30, 2023

NetanelBasal Oct 30, 2023

NetanelBasal left a comment

NetanelBasal Oct 29, 2023

NetanelBasal Oct 29, 2023

NetanelBasal Oct 29, 2023

NetanelBasal commented Nov 4, 2023

luii commented Nov 4, 2023

NetanelBasal commented Nov 4, 2023

luii commented Nov 4, 2023

NetanelBasal commented Nov 4, 2023

NetanelBasal commented Nov 4, 2023

[WIP] feat: update @ngneat/query to use the newest @tanstack/query version #117

[WIP] feat: update @ngneat/query to use the newest @tanstack/query version #117

Conversation

luii commented Oct 29, 2023 • edited Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

stackblitz bot commented Oct 29, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NetanelBasal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NetanelBasal commented Nov 4, 2023

luii commented Nov 4, 2023

NetanelBasal commented Nov 4, 2023

luii commented Nov 4, 2023

NetanelBasal commented Nov 4, 2023

NetanelBasal commented Nov 4, 2023

[WIP] feat: update `@ngneat/query` to use the newest `@tanstack/query` version #117

[WIP] feat: update `@ngneat/query` to use the newest `@tanstack/query` version #117

luii commented Oct 29, 2023 •

edited

Loading