feat(query): new implementation with peer dep #1435

dai-shi · 2022-09-20T04:45:45Z

This is a big refactor on tanstack query integration. the goals are:

more maintainable code, thinner wrapper, using jotai/utils
full, non suspense api [atomWithQuery | atomWithInfiniteQuery]: return all react query state. #1068, Should jotai/query return more properties than just data? #1424
better versioning React Query v4 #1312 (reply in thread)

compatible atomWithQuery
compatible atomWithInfiniteQuery
new docs (incl. status api and mutation api)

close #1418
close #1068
close #309
close #1454

vercel · 2022-09-20T04:45:48Z

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

Name	Status	Preview	Updated
jotai	✅ Ready (Inspect)	Visit Preview	Oct 21, 2022 at 3:24AM (UTC)

codesandbox-ci · 2022-09-20T04:46:38Z

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 02881ed:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
Next.js	Configuration
Next.js with custom Babel config	Configuration
React with custom Babel config	Configuration
jotai-query-stuck-in-strict	Issue #1418
long-request-does-not-render	Issue #1454

dai-shi · 2022-09-20T04:46:45Z

 FAIL  tests/query/atomWithQuery.test.tsx (8.468 s)
  ✓ query basic test (127 ms)
  ✓ query basic test with object instead of function (109 ms)
  ✕ query refetch (1255 ms)
  ✕ query loading (1254 ms)
  ✕ query loading 2 (1271 ms)
  ✕ query no-loading with keepPreviousData (257 ms)
  ✕ query with enabled (1011 ms)
  ✕ query with enabled 2 (243 ms)
  ✓ query with enabled (#500) (369 ms)
  ✓ query with initialData test (10 ms)
  ✓ query dependency test (351 ms)
  ✓ query expected QueryCache test (117 ms)
  error handling
    ✓ can catch error in error boundary (136 ms)
    ✕ can recover from error (1373 ms)

github-actions · 2022-09-20T04:49:47Z

Size Change: -4.42 kB (-3%)

Total Size: 150 kB

Filename	Size	Change
`dist/esm/query.js`	442 B	-899 B (-67%)	🏆
`dist/query.js`	698 B	-659 B (-49%)	🎉
`dist/system/query.development.js`	567 B	-931 B (-62%)	🏆
`dist/system/query.production.js`	385 B	-708 B (-65%)	🏆
`dist/umd/query.development.js`	838 B	-676 B (-45%)	🎉
`dist/umd/query.production.js`	585 B	-547 B (-48%)	🎉

ℹ️ View Unchanged

Filename	Size
`dist/babel/plugin-debug-label.js`	913 B
`dist/babel/plugin-react-refresh.js`	1.14 kB
`dist/babel/preset.js`	1.39 kB
`dist/devtools.js`	3.8 kB
`dist/esm/babel/plugin-debug-label.js`	864 B
`dist/esm/babel/plugin-react-refresh.js`	1.05 kB
`dist/esm/babel/preset.js`	1.32 kB
`dist/esm/devtools.js`	2.98 kB
`dist/esm/immer.js`	643 B
`dist/esm/index.js`	5.28 kB
`dist/esm/optics.js`	668 B
`dist/esm/redux.js`	254 B
`dist/esm/urql.js`	1.26 kB
`dist/esm/utils.js`	5.23 kB
`dist/esm/valtio.js`	540 B
`dist/esm/xstate.js`	872 B
`dist/esm/zustand.js`	289 B
`dist/immer.js`	676 B
`dist/index.js`	6.24 kB
`dist/optics.js`	892 B
`dist/redux.js`	270 B
`dist/system/babel/plugin-debug-label.development.js`	968 B
`dist/system/babel/plugin-debug-label.production.js`	730 B
`dist/system/babel/plugin-react-refresh.development.js`	1.15 kB
`dist/system/babel/plugin-react-refresh.production.js`	901 B
`dist/system/babel/preset.development.js`	1.42 kB
`dist/system/babel/preset.production.js`	1.1 kB
`dist/system/devtools.development.js`	3.16 kB
`dist/system/devtools.production.js`	2.11 kB
`dist/system/immer.development.js`	772 B
`dist/system/immer.production.js`	469 B
`dist/system/index.development.js`	5.5 kB
`dist/system/index.production.js`	3.06 kB
`dist/system/optics.development.js`	770 B
`dist/system/optics.production.js`	455 B
`dist/system/redux.development.js`	344 B
`dist/system/redux.production.js`	217 B
`dist/system/urql.development.js`	1.41 kB
`dist/system/urql.production.js`	937 B
`dist/system/utils.development.js`	5.59 kB
`dist/system/utils.production.js`	3.51 kB
`dist/system/valtio.development.js`	652 B
`dist/system/valtio.production.js`	400 B
`dist/system/xstate.development.js`	981 B
`dist/system/xstate.production.js`	626 B
`dist/system/zustand.development.js`	377 B
`dist/system/zustand.production.js`	235 B
`dist/umd/babel/plugin-debug-label.development.js`	1.08 kB
`dist/umd/babel/plugin-debug-label.production.js`	857 B
`dist/umd/babel/plugin-react-refresh.development.js`	1.3 kB
`dist/umd/babel/plugin-react-refresh.production.js`	1.02 kB
`dist/umd/babel/preset.development.js`	1.54 kB
`dist/umd/babel/preset.production.js`	1.25 kB
`dist/umd/devtools.development.js`	3.93 kB
`dist/umd/devtools.production.js`	2.6 kB
`dist/umd/immer.development.js`	829 B
`dist/umd/immer.production.js`	538 B
`dist/umd/index.development.js`	6.34 kB
`dist/umd/index.production.js`	3.48 kB
`dist/umd/optics.development.js`	1.04 kB
`dist/umd/optics.production.js`	642 B
`dist/umd/redux.development.js`	418 B
`dist/umd/redux.production.js`	290 B
`dist/umd/urql.development.js`	5.02 kB
`dist/umd/urql.production.js`	3.54 kB
`dist/umd/utils.development.js`	9.78 kB
`dist/umd/utils.production.js`	6.29 kB
`dist/umd/valtio.development.js`	690 B
`dist/umd/valtio.production.js`	476 B
`dist/umd/xstate.development.js`	1.42 kB
`dist/umd/xstate.production.js`	884 B
`dist/umd/zustand.development.js`	445 B
`dist/umd/zustand.production.js`	303 B
`dist/urql.js`	4.83 kB
`dist/utils.js`	9.56 kB
`dist/valtio.js`	551 B
`dist/xstate.js`	1.26 kB
`dist/zustand.js`	303 B

_{compressed-size-action}

dai-shi

I think this is reasonably good, even though it introduces some behavioral changes.

dai-shi · 2022-09-22T13:42:38Z

src/query/atomWithQuery.ts

-    }
-    return { resultAtom, makePending, startQuery }
+  const getOptions = (get: Getter) => ({
+    staleTime: 500,


This is to avoid failing tests with strict effect. this or retryOnMount: false should help. otherwise, it will fetch twice in DEV mode, which is actually fine and expected.

dai-shi · 2022-09-22T13:43:26Z

src/query/atomWithQuery.ts

  })
-
-  const queryAtom = atom(
+  const [dataAtom] = atomsWithTanstackQuery(getOptions, getQueryClient)


It's unfortunate that we can't simply return dataAtom. We need a small wrapper to pass our current tests.

tests/query/atomWithQuery.test.tsx

EduardoLopes · 2022-10-17T14:06:28Z

thanks! ✨

(getting back from work vacation today. i'll take a look)

src/query/atomWithQuery.ts

docs/integrations/query.mdx

EduardoLopes · 2022-10-18T13:32:54Z

I've found another bug. The fetchStatus, isInitialLoading and others status never change.

I did a reproduction comparing to tanstack/query return: https://codesandbox.io/s/winter-water-kdysdj?file=/src/App.tsx

dai-shi · 2022-10-18T22:48:59Z

Good catch, @EduardoLopes !
I will look into it. jotaijs/jotai-tanstack-query#9

nix6839 · 2022-10-23T04:12:50Z

Can we make this repository a monorepo later and add 'jotai-tanstack-query' to this repository? For more promotion, contribution and maintenance. It's just suggestion. BTW, thanks for your hard work!

dai-shi · 2022-10-23T06:43:20Z

@nix6839 Thanks for your comment.
We considered it as an option, but decided to go with separate repositories. That would make this repo too big if we accept more integrations. And, I also want to give different permissions for libs.
Feel free to drop some ideas to mitigate the promotion issue with multiple repos.

wobsoriano · 2022-12-07T06:29:53Z

src/query/atomWithInfiniteQuery.ts

  RefetchOptions,
  RefetchQueryFilters,
 } from '@tanstack/query-core'
+import { atomsWithInfiniteQuery } from 'jotai-tanstack-query'
 import { atom } from 'jotai'


Hi @dai-shi! Are there plans of importing atom from valtio/vanilla instead? Thanks!

jotai/query will be deprecated soon.
So, you want to use jotai-tanstack-query and, in that case, we have a PR open.

jotaijs/jotai-tanstack-query#18

There, find codesandbox-ci comment and click here. You will then find "Local Install Instructions".

wip(query): new implementation with dep

7ce14a4

dai-shi added 2 commits September 20, 2022 13:58

pending on action

d99f1ea

pending atom for refetch action

35a4571

vercel bot deployed to Preview September 20, 2022 05:13 View deployment

tweak and skip some tests

c3f9864

vercel bot deployed to Preview September 20, 2022 12:48 View deployment

wip: refetch force

22d8f79

vercel bot deployed to Preview September 20, 2022 13:42 View deployment

dai-shi mentioned this pull request Sep 21, 2022

[jotai/query] atomWithQuery gets stuck in react strict mode #1418

Closed

dai-shi added 2 commits September 22, 2022 08:17

add strict mode

837eb15

no force option

6805540

vercel bot deployed to Preview September 21, 2022 23:18 View deployment

dai-shi mentioned this pull request Sep 21, 2022

onMount doesn't seem to fire for suspended atoms #1437

Closed

always staleTime

e23319b

vercel bot deployed to Preview September 22, 2022 12:32 View deployment

fix initial data

bb752c2

vercel bot deployed to Preview September 22, 2022 13:35 View deployment

dai-shi commented Sep 22, 2022

View reviewed changes

update dep

140f18e

vercel bot deployed to Preview September 23, 2022 03:15 View deployment

infinite query

a433d27

vercel bot deployed to Preview September 23, 2022 04:27 View deployment

fix type & skip test

be18c4e

vercel bot deployed to Preview September 23, 2022 04:42 View deployment

update dep

18fad6b

vercel bot deployed to Preview September 23, 2022 08:40 View deployment

vercel bot deployed to Preview October 7, 2022 12:15 View deployment

Merge branch 'main' into wip/query/new-impl-with-dep

fcb46aa

vercel bot deployed to Preview October 9, 2022 14:24 View deployment

dai-shi mentioned this pull request Oct 10, 2022

feat(urql): new implementation with peer dep #1473

Merged

4 tasks

update dep

0dbbde9

vercel bot deployed to Preview October 11, 2022 14:15 View deployment

Merge branch 'main' into wip/query/new-impl-with-dep

5760892

vercel bot deployed to Preview October 18, 2022 10:07 View deployment

update docs

4acab59

vercel bot deployed to Preview October 18, 2022 11:46 View deployment

dai-shi changed the title ~~wip(query): new implementation with peer dep~~ feat(query): new implementation with peer dep Oct 18, 2022

dai-shi marked this pull request as ready for review October 18, 2022 11:51

Aslemammad reviewed Oct 18, 2022

View reviewed changes

src/query/atomWithQuery.ts Outdated Show resolved Hide resolved

docs/integrations/query.mdx Outdated Show resolved Hide resolved

dai-shi mentioned this pull request Oct 18, 2022

status never change jotaijs/jotai-tanstack-query#9

Closed

update dep

7e7434b

vercel bot deployed to Preview October 19, 2022 15:22 View deployment

dai-shi mentioned this pull request Oct 20, 2022

breaking: simplify api names jotaijs/jotai-tanstack-query#11

Merged

update jotai-tanstack-query v0.4.0

02881ed

vercel bot deployed to Preview October 21, 2022 03:25 View deployment

dai-shi added this to the v1.9.0 milestone Oct 24, 2022

dai-shi merged commit 3b0d7cf into main Oct 26, 2022

dai-shi deleted the wip/query/new-impl-with-dep branch October 26, 2022 23:07

dai-shi mentioned this pull request Nov 15, 2022

feat(valtio,zustand,redux,xstate,immer,optics): move integrations to peer deps #1573

Merged

6 tasks

wobsoriano reviewed Dec 7, 2022

View reviewed changes

dai-shi mentioned this pull request Dec 27, 2022

[jotai/query] atomWithMutation #309

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(query): new implementation with peer dep #1435

feat(query): new implementation with peer dep #1435

dai-shi commented Sep 20, 2022 •

edited

Loading

vercel bot commented Sep 20, 2022 •

edited

Loading

codesandbox-ci bot commented Sep 20, 2022 •

edited

Loading

dai-shi commented Sep 20, 2022

github-actions bot commented Sep 20, 2022 •

edited

Loading

dai-shi left a comment

dai-shi Sep 22, 2022

dai-shi Sep 22, 2022

EduardoLopes commented Oct 17, 2022

EduardoLopes commented Oct 18, 2022 •

edited

Loading

dai-shi commented Oct 18, 2022

nix6839 commented Oct 23, 2022 •

edited

Loading

dai-shi commented Oct 23, 2022

wobsoriano Dec 7, 2022

dai-shi Dec 7, 2022

feat(query): new implementation with peer dep #1435

feat(query): new implementation with peer dep #1435

Conversation

dai-shi commented Sep 20, 2022 • edited Loading

vercel bot commented Sep 20, 2022 • edited Loading

codesandbox-ci bot commented Sep 20, 2022 • edited Loading

dai-shi commented Sep 20, 2022

github-actions bot commented Sep 20, 2022 • edited Loading

dai-shi left a comment

Choose a reason for hiding this comment

dai-shi Sep 22, 2022

Choose a reason for hiding this comment

dai-shi Sep 22, 2022

Choose a reason for hiding this comment

EduardoLopes commented Oct 17, 2022

EduardoLopes commented Oct 18, 2022 • edited Loading

dai-shi commented Oct 18, 2022

nix6839 commented Oct 23, 2022 • edited Loading

dai-shi commented Oct 23, 2022

wobsoriano Dec 7, 2022

Choose a reason for hiding this comment

dai-shi Dec 7, 2022

Choose a reason for hiding this comment

dai-shi commented Sep 20, 2022 •

edited

Loading

vercel bot commented Sep 20, 2022 •

edited

Loading

codesandbox-ci bot commented Sep 20, 2022 •

edited

Loading

github-actions bot commented Sep 20, 2022 •

edited

Loading

EduardoLopes commented Oct 18, 2022 •

edited

Loading

nix6839 commented Oct 23, 2022 •

edited

Loading