Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(*): add optional logger prop to QueryClient config #3246

Merged
merged 1 commit into from
Feb 26, 2022

Conversation

anilanar
Copy link
Contributor

@anilanar anilanar commented Jan 29, 2022

See the commit message for full(ish) list of changes.

Addresses #3240.

I'll update docs if we are happy with these changes.

@vercel
Copy link

vercel bot commented Jan 29, 2022

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tanstack/react-query/2WFhFjtFjECpdmnkNN7v8KAPukWF
✅ Preview: https://react-query-git-fork-anilanar-configurable-logger-tanstack.vercel.app

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 29, 2022

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 16c95c0:

Sandbox Source
tannerlinsley/react-query: basic Configuration
tannerlinsley/react-query: basic-typescript Configuration

src/core/logger.ts Outdated Show resolved Hide resolved
Copy link
Collaborator

@TkDodo TkDodo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

docs would need to be updated please, as well as the migration guide

src/core/query.ts Outdated Show resolved Hide resolved
src/reactjs/logger.native.ts Show resolved Hide resolved
src/reactjs/tests/utils.tsx Show resolved Hide resolved
@TkDodo
Copy link
Collaborator

TkDodo commented Jan 30, 2022

I think we can remove setLogger from the side-effects, right?

https://github.com/tannerlinsley/react-query/blob/5e2f2c2b644c03433c15e3ba61f884e142098fc7/package.json#L17-L26

@codecov
Copy link

codecov bot commented Jan 30, 2022

Codecov Report

Merging #3246 (16c95c0) into alpha (aa853d8) will decrease coverage by 0.00%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##            alpha    #3246      +/-   ##
==========================================
- Coverage   96.81%   96.81%   -0.01%     
==========================================
  Files          46       43       -3     
  Lines        2295     2293       -2     
  Branches      663      667       +4     
==========================================
- Hits         2222     2220       -2     
  Misses         70       70              
  Partials        3        3              
Impacted Files Coverage Δ
src/core/mutationCache.ts 100.00% <ø> (ø)
src/core/queryCache.ts 100.00% <ø> (ø)
src/core/logger.ts 100.00% <100.00%> (ø)
src/core/mutation.ts 100.00% <100.00%> (ø)
src/core/query.ts 100.00% <100.00%> (ø)
src/core/queryClient.ts 100.00% <100.00%> (ø)
src/core/queryObserver.ts 100.00% <100.00%> (ø)
src/reactjs/tests/utils.tsx 97.29% <100.00%> (-0.08%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update aa853d8...16c95c0. Read the comment docs.

@TkDodo
Copy link
Collaborator

TkDodo commented Jan 30, 2022

The size of react-query.production.min.js seems to go up from 11.74KB on the latest alpha release to 11.88KB on this PR.
This seems significant for such a tiny change 🤔

@anilanar
Copy link
Contributor Author

anilanar commented Jan 30, 2022

The size of react-query.production.min.js seems to go up from 11.74KB on the latest alpha release to 11.88KB on this PR.

I think console vs { log: console.log, warn: console.warn. error: console.error } adds ~ 50bytes by itself, so once I revert that, it should be a less significant number, but I can probably reduce it further, I'll check.

@TkDodo
Copy link
Collaborator

TkDodo commented Jan 30, 2022

With the old approach, log statements were removing completely in production due to the env check. Now they stay in the bundle and do nothing per default, and it will increase with every log statement we make. The string itself also can't be minified.
The key warning for example is similar to the react key warning that only shows up in dev mode. Not sure why we'd ever want that in production.

@TkDodo TkDodo added the v4 label Feb 6, 2022
@TkDodo
Copy link
Collaborator

TkDodo commented Feb 14, 2022

any updates here please, especially in regards to my last statement? thank you

@anilanar
Copy link
Contributor Author

@TkDodo I'll check today and get back to you.

@anilanar
Copy link
Contributor Author

@TkDodo I wrapped all log usages with production check. I'll add docs and this should be good to go.

The increase in bundle size comes from logger class fields and getLogger getter, which cannot be shortened to a single character by the uglifier unlike getLogger function.

If you prefer bundle size over code readability, you can rename all private class fields to single character names and that can save some bytes.

@TkDodo
Copy link
Collaborator

TkDodo commented Feb 18, 2022

@TkDodo I wrapped all log usages with production check. I'll add docs and this should be good to go.

Thanks. Have you removed the sideEffects form package.json ?

The increase in bundle size comes from logger class fields and getLogger getter, which cannot be shortened to a single character by the uglifier unlike getLogger function.

If you prefer bundle size over code readability, you can rename all private class fields to single character names and that can save some bytes.

Thanks, I do not prefer that, but I think there are ways to let terser know to mangle private fields, but it's out of scope for here.

The gain is also minimal now since you updated with alpha:

alpha: 11.64KB
here:  11.68KB

so it's all good 👍

@anilanar
Copy link
Contributor Author

@TkDodo

I updated the docs 🎉

I wanted to document the Logger interface but noticed that there's no documentation convention for pure types/interfaces so I created a section in Guides instead.

@TkDodo
Copy link
Collaborator

TkDodo commented Feb 26, 2022

@anilanar the side-effects still need to be removed from package.json, right?

#3246 (comment)

- remove setLogger
- add optional `logger` prop to QueryClientConfig
- add getLogger public method to QueryClient
- add optional `logger` prop to QueryConfig and MutationConfig
- add getDefaultLogger function which returns a default logger based on
environment, which is used by everything that takes an optional logger
in their config
- add createQueryClient test util function that uses a mock logger
- replace all `new QueryClient` calls with createQueryClient calls
- remove mockConsoleError and usages from tests, which are not necessary anymore

BREAKING CHANGE: remove setLogger
@anilanar
Copy link
Contributor Author

@TkDodo Sorry, fixed.

@TkDodo
Copy link
Collaborator

TkDodo commented Feb 26, 2022

thank you for your effort in contributing this 🙇

@TkDodo TkDodo merged commit 315f0cf into TanStack:alpha Feb 26, 2022
@TkDodo
Copy link
Collaborator

TkDodo commented Feb 26, 2022

Now that I've merged it, I just had an idea for a follow up regarding the tests 😅

I think it would be better understandable if we don't rely on the global mockLogger. We do have createQueryClient() anyways, so how about:

  • createQueryClient() in the tests always creates a new mockLogger for encapsulation
  • in the tests where we need it, we just call queryClient.getLogger() because we have a queryClient anyways.

what do you think?

@tannerlinsley
Copy link
Collaborator

🎉 This PR is included in version 4.0.0-alpha.16 🎉

The release is available on:

Your semantic-release bot 📦🚀

@anilanar
Copy link
Contributor Author

anilanar commented Feb 26, 2022

@TkDodo That's what I did at first, and then noticed that every test needs to create a mock logger in the exact same way.

Because jest mocks are isolated between tests (i.e. mock call counts etc are reset between runs, mockImplementations are scoped to files), then I thought, there would be 0 harm for having a global mock logger to reduce some boilerplate from unit tests.

@TkDodo
Copy link
Collaborator

TkDodo commented Feb 26, 2022

okay yeah that's good enough. I just noticed something else: we get error logs in the tests now, see here:

https://github.com/tannerlinsley/react-query/runs/5344881152?check_suite_focus=true

PASS src/reactjs/tests/useQuery.test.tsx (13.6[42](https://github.com/tannerlinsley/react-query/runs/5344881152?check_suite_focus=true#step:5:42) s)
  ● Console

    console.error
      Error: Uncaught 'Error test jaylen'
          at reportException (/home/runner/work/react-query/react-query/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
          at innerInvokeEventListeners (/home/runner/work/react-query/react-query/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:346:9)
          at invokeEventListeners (/home/runner/work/react-query/react-query/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:281:3)
          at HTMLUnknownElementImpl._dispatch (/home/runner/work/react-query/react-query/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:228:9)
          at HTMLUnknownElementImpl.dispatchEvent (/home/runner/work/react-query/react-query/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:101:17)
          at HTMLUnknownElement.dispatchEvent (/home/runner/work/react-query/react-query/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:207:34)
          at Object.invokeGuardedCallbackDev (/home/runner/work/react-query/react-query/node_modules/react-dom/cjs/react-dom.development.js:237:16)
          at invokeGuardedCallback (/home/runner/work/react-query/react-query/node_modules/react-dom/cjs/react-dom.development.js:292:31)
          at beginWork$1 (/home/runner/work/react-query/react-query/node_modules/react-dom/cjs/react-dom.development.js:23203:7)
          at performUnitOfWork (/home/runner/work/react-query/react-query/node_modules/react-dom/cjs/react-dom.development.js:22157:12) Error test jaylen

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at VirtualConsole.emit (node:events:520:28)
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:28)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:346:9)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:281:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:228:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:101:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:207:34)

    console.error
      The above error occurred in the <Page> component:
          in Page
          in ErrorBoundary
          in QueryClientProvider
      
      React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:19527:21)
      at logError (node_modules/react-dom/cjs/react-dom.development.js:19564:5)
      at ErrorBoundary.callback (node_modules/react-dom/cjs/react-dom.development.js:207[44](https://github.com/tannerlinsley/react-query/runs/5344881152?check_suite_focus=true#step:5:44):9)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12[49](https://github.com/tannerlinsley/react-query/runs/5344881152?check_suite_focus=true#step:5:49)0:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12[51](https://github.com/tannerlinsley/react-query/runs/5344881152?check_suite_focus=true#step:5:51)1:9)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:198[58](https://github.com/tannerlinsley/react-query/runs/5344881152?check_suite_focus=true#step:5:58):11)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:22[80](https://github.com/tannerlinsley/react-query/runs/5344881152?check_suite_focus=true#step:5:80)3:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)

tests are passing but this wasn't here before and is quite distracting when running tests. do you know how to fix that?

@TkDodo
Copy link
Collaborator

TkDodo commented Feb 26, 2022

this seems to be for all tests with ErrorBoundaries. I've found an issue and apparently the only way is to spy on the console?

facebook/react#11098 (comment)

How did that work before?

@TkDodo
Copy link
Collaborator

TkDodo commented Feb 26, 2022

I've pushed a quickfix to alpha, but if you know a proper fix, I would appreciate another PR. thanks.

4253ff3

@anilanar
Copy link
Contributor Author

@TkDodo Sadly that's still an open issue and React team didn't fix it nor they promised it yet: facebook/react#15069 (you can see my face couple of times in that thread 😄).

@TkDodo
Copy link
Collaborator

TkDodo commented Feb 26, 2022

okay thanks, I understand that. I still think my fix is rather poor, because it will also silence errors that we do not expect.

I want to actually add the failOnError jest plugin, but that doesn't work when we mock the error console globally like that. Maybe we should just add our own MockErrorBoundary that renders an ErrorBoundary + mock console error?

@anilanar
Copy link
Contributor Author

@TkDodo At Userlike, we use a custom logger that fails the test when an error is logged and use a different custom logger when log.errors are expected.

We were forced to not use console as a logger at some point because it was impossible to prevent some libraries log errors in some cases.

@tannerlinsley
Copy link
Collaborator

🎉 This PR is included in version 4.0.0-beta.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

tannerlinsley added a commit that referenced this pull request Jul 18, 2022
* v4 alpha (#3060)

* feat(hydration): remove hydration package (#2936)

* V4: streamline cancel refetch (#2937)

* feat: streamline cancelRefetch

the following functions now default to true for cancelRefetch:

- refetchQueries (+invalidateQueries, + resetQueries)
- query.refetch
- fetchNextPage (unchanged)
- fetchPreviousPage (unchanged)

* feat: streamline cancelRefetch

make sure that refetchOnReconnect and refetchOnWindowFocus do not cancel already running requests

* feat: streamline cancelRefetch

update tests

refetch and invalidate now both cancel previous queries, which is intended, so we get more calls to the queryFn in these cases

* feat: streamline cancelRefetch

add more tests for cancelRefetch behavior

* feat: streamline cancelRefetch

update docs and migration guide

* feat: streamline cancelRefetch

simplify conditions by moving the ?? true default down to fetch on observer level; all 3 callers (fetchNextPage, fetchPreviousPage and refetch) just pass their options down and adhere to this default; refetch also only has 3 callers:
- refetch from useQuery, where we want the default
- onOnline and onFocus, where we now explicitly pass false to keep the previous behavior

and add more tests

* feat: streamline cancelRefetch

we always call this.fetch() with options, so we can just as well make the mandatory

also, streamline signatures by destructing values that can't be forwarded (and use empty object as default value) in options and just spread the rest

* feat: streamline cancelRefetch

fix types for refetch

it was accidentally made too wide and allowed all refetchFilters, like `predicate`; but with `refetch` on an obserserver, there is nothing to filter for, except the page, so that is what we need to accept via `RefetchPageFilters`

* feat: streamline cancelRefetch

refetch never took a queryKey as param - it is always bound to the observer

* feat: better query filters (#2938)

* fix: rename react directory to reactjs (#2884)

* fix: rename react directory to reactjs

the directory being named "react" causes an error with the moduleDirectories option from jest

* fix: update package.json files to match the updated reactjs directory name

* fix: change react test utils imports to match new directory name

* docs(v4): add renamed reactjs details to migration guide

Co-authored-by: Eddy Vinck <[email protected]>

* feat: mutation cache duration (#2963)

* feat: mutation cachetime

stramline queryCache / mutationCache events by combining them into notifiable.ts

* feat: mutation cachetime

removable

* feat: mutation cachetime

add gc to mutations

* feat: mutation cachetime

streamline event types between queries and mutations

* feat: mutation cachetime

tests, and I forgot to implement optionalRemove, so make it abstract

* feat: mutation cachetime

replicate gc behavior from https://github.com/tannerlinsley/react-query/pull/2950 and add more tests

* feat: mutation cachetime

get test coverage back to 100%

* feat: mutation cachetime

docs

* feat: mutation cachetime

try to make tests more resilient

* feat: mutation cachetime

fix imports after merge conflict

* refactor(persistQueryClient): Make persistQueryClient stable (#2961)

* :truck: Remove experimental from persist-query-client

* :truck: Rename persistor -> persister

* ✏️  Fix Persistor -> Persister in imports

* :truck: Update name in rollup config

* :truck: Move createAsyncStoragePersister and createWebStoragePersister to stable version and rename persistor -> persister

* 📝  Update documentation

* 📝   Add migrating to v4 docs

* Apply suggestions from code review

Co-authored-by: Dominik Dorfmeister <[email protected]>

* 2964 changes to on success callback (#2969)

* feat(useQuery): onSuccess callback

do not call onSuccess if update was done manually from setQueryData

* feat(useQuery): onSuccess callback

test that onSuccess is not called when setQueryData is used

* feat(useQuery): onSuccess callback

docs changes

* feat(useQuery): onSuccess callback

options spread is wrong - `updatedAt` is actually `dataUpdatedAt`. Oddly we didn't have a test, so I added one

* 2919 query key array (#2988)

* feat: query key array

remove code that internally ensures that we get an Array, because it is now the expected interface, ensured by TypeScript

* feat: query key array

update tests to the new syntax

* feat: query key array

fix assertions, because there is no array wrapping happening internally anymore. The key you receive from the context is exactly the key you passed in

* feat: query key array

this test doesn't make much sense anymore

* feat: query key array

 wrapping in an extra array doesn't yield the same results anymore since v4 because keys need to be an array

* feat: query key array

make docs adhere to new array key syntax

* feat: query key array

migration docs

* feat(QueryObserver): track queries as default (#2987)

* feat(Query Options): remove notifyOnChangePropsExclusion

- remove related code from queryObserver
- remove type def
- remove related tests

* docs(Query Options): update notifyOnChangePropsExclusion sections

- remove from api references
- add to v4 migration guide

* feat(QueryObserver): "tracked" as default behavior

- remove "tracked" completely if notifyOnChangeProps is not defined, behave as v3 "tracked"
- add `notifyOnChangeProps: 'all' to opt out of the smart tracking

TODO: Now that default behavior has changed, work out the failed tests. Which parts to change for current ones and possibly write new ones.

* test(useQuery): adjust tests to pass for notifyOnChangeProps udpate

* test(useInfiniteQuery): adjust tests to pass for notifyOnChangeProps udpate

* test(QueryResetErrorBoundary): adjust tests to pass for notifyOnChangeProps udpate

* refactor(QueryObserver): use nullish coalescing operator

much cleaner than the negated if I started with

* test(QueryResetErrorBoundary): remove "tracked" from test

* revert: test(QueryResetErrorBoundary): adjust tests to pass for notifyOnChaneProps udpate

This reverts commit a34b4720675dad5ee6ebde401639f328c0c83122.

The changes are not necessary after PR #2993 fix.

* refactor(QueryObserver): combine prop checks

* docs(notifyOnChangeProps): update docs to reflect new api

* refactor: Remove deprecated promise cancel (#2996)

* :fire: Remove the cancel method on promise for cancelling promise

* ✅  Fix query client tests

* ✅   Update query and useQuery tests

* ✅   Update use infinite query tests

* 📝   Update migartion guide

* :bug: Fix linking in documentation

* :pencil: Fix grammatical errors in docs

Co-authored-by: Dominik Dorfmeister <[email protected]>

* :refactor: Use abortSignal for query cancellation in InfiniteQueryBehavior

* 🚨  Fix lint errors

* :recycle: Move define signal property to a separate function

Co-authored-by: Dominik Dorfmeister <[email protected]>

* remove test that doesn't make sense anymore - we don't allow different falsy query keys now

* 2927 offline queries (#3006)

* feat(useQuery): offline queries

remove defaultQueryObserverOptions because it is the same as defaultQueryOptions and we can just use that

* feat(useQuery): offline queries

setup dependent default values, to make it easier to work with them

* feat(useQuery): offline queries

basic changes to retryer:
- pause the query before fetching depending upon networkMode
- pause retries depending upon networkRetry

* feat(useQuery): offline queries

move networkRetry and networkMode defaults to the retryer creation, because we need the same for mutations

* feat(useQuery): offline queries

decouple focus and online manager: we're now informing caches of a focus when we're focussed, and about an online event if we come online; if the retryer continues, it can then decide to not fetch depending on our networkMode

* feat(useQuery): offline queries

expose isPaused on the queryResult and make sure isFetching is false when we are paused

* feat(useQuery): offline queries

knowing if we can fetch depends on if we are paused or not, as other conditions should apply

also, rename options (not sure if that will stick though)

* feat(useQuery): offline queries

adjust existing tests for isPaused being exposed

* feat(useQuery): offline queries

fix existing test by setting options to emulate the previous behaviour, otherwise, with `mockNavigatorOnline` being set to false right from the start, the mutation would never fire off

* feat(useQuery): offline queries

adapt onOnline, onFocus tests to new behavior: they are now decoupled, and onOnline is always called even when not focused and vice versa. The retryer should make sure to not continue fetching if necessary

* feat(useQuery): offline queries

first test for networkMode

* feat(useQuery): offline queries

isFetching and isPaused are now derived and stored together in a fetchingState enum (idle, fetching, paused)

* feat(useQuery): offline queries

better networkMode api: online, always, offlineFirst (basically always but with paused retries)

* feat(useQuery): offline queries

more tests for networkMode: online

* feat(useQuery): offline queries

more tests for networkMode: online

* feat(useQuery): offline queries

tests for networkMode: always

* feat(useQuery): offline queries

fix tests that were influencing each other by using proper jest mocks for online and visibility state

* add paused queries to the devtools.tsx

* feat(useQuery): offline queries

never stop pausing when continueFn is called. Initially, I only had this guard for when it's called from the outside, e.g. for onWindowFocus while still being offline, but we need this always because otherwise query cancellation can potentially continue a paused query

* feat(useQuery): offline queries

okay, pausing multiple times was a bad idea, continueFn() will be called eventually anyways

* feat(useQuery): offline queries

attempt at offline toggle button

* feat(useQuery): offline queries

different icons, padding, color

* feat(useQuery): offline queries

i messed up the icon order

* feat(useQuery): offline queries

guard against illegal state transitions: paused queries can unmount or get cancelled, in which case we shouldn't continue them, even if we dispatch the continue event

* feat(useQuery): offline queries

fix devtools tests, account for paused queries

* Revert "feat(useQuery): offline queries"

This reverts commit a647f64a051ca4c02a872e7871b4b2ce49aeda2c.

* feat(useQuery): offline queries

keep the do-not-start logic out of the run function, and thus out of promiseOrValue. if the promise has already been resolved in the meantime, e.g. because of a `cancel`, the run method will just do nothing, while the previous logic would've started to fetch

* feat(useQuery): offline queries

show inactive as higher priority than paused

* feat(useQuery): offline queries

make sure that optimistic results don't show an intermediate fetching state, but go opmistically to paused instead

* feat(useQuery): offline queries

real result needs to match optimistic result

* feat(useQuery): offline queries

stupid mistake

* feat(useQuery): offline queries

keep status color and status label in sync

* feat(useQuery): offline queries

make networkMode param mandatory for canFetch (and default to online internally) so that we can't screw that up again

* feat(useQuery): offline queries

make sure test "finishes" to avoid prints to the console if another test goes online again

* feat(useQuery): offline queries

move cancel function to the top, as it's no longer dependent on the promise since the `.cancel` function is gone; all we need is to abort the signal and reject the promise of the retryer

* feat(useQuery): offline queries

inline canContinue, because it's now only called if the query is in paused state anyways

* feat(useQuery): offline queries

avoid the impossible state by not calling config.onContinue for already resolved queries, as that would put them right into fetching state again, without actually fetching

* feat(useQuery): offline queries

let resolved querie continue, but don't put them in fetching state

* feat(useQuery): offline queries

fix merge conflict and invert condition because no-negated-condition

* feat(useQuery): offline queries

add test for abort signal consumed - different results expected for node < 15 where we don't have AbortController, thus can't consume the signal

* feat(useQuery): offline queries

online queries should not fetch if paused and we go online when cancelled and no refetchOnReconnect

* feat(useQuery): offline queries

gc test

* feat(useQuery): offline queries

offlineFirst test

* feat(useQuery): offline queries

mock useMediaQuery to get rid of unnecessary check in devtools - if window is defined, `matchMedia` is also defined

* feat(useQuery): offline queries

use a higher retryDelay to make test more stable, otherwise, it might start retrying before we "go offline"

* feat(useQuery): offline queries

improve devtools test: check if onClick props are being called

* feat(useQuery): offline queries

add devtools test for offline mock

* feat(useQuery): offline queries

offline mutations test

* feat(useQuery): offline queries

network mode docs (unfinished)

* feat(useQuery): offline queries

network mode docs

* feat(useQuery): offline queries

fix merge conflicts

* refactor(queryClient): remove undocumented methods

* fix: offline mutations fixes (#3051)

* feat: offline mutations

move reducer into Mutation class to avoid passing state (and options) around

* feat: offline mutations

optimistically set paused state depending on if we can fetch or not to avoid an intermediate state where we are loading but not paused

* examples: fix query keys in basic examples

because we need those for preview builds

* fix(useMutation): make sure cacheCallbacks are always called

even if the useMutation component unmounts and we have a cacheTime of 0; the fix was cherry-picked from the react-18 branch, where we also introduced this behavior

* Feature/cachetime zero (#3054)

* refactor: cacheTime-zero

remove special handling for cacheTime: 0 and schedule a normal garbage collection for those queries. They will be eligible for gc after a setTimeout(0), but then they will only be optionally removed. This makes sure that paused queries are NOT gc'ed

* refactor: cacheTime-zero

remove special test "about online queries with cacheTime:0 should not fetch if paused and then unmounted". paused queries will now be kept until they continue, just like with every other query, unless query cancellation or abort signal was involved

* refactor: cacheTime-zero

adapt "remounting" test: if the same query with cacheTime 0 unmounts and remounts in the same cycle, the query will now be picked up and will not go to loading state again. I think this is okay

* refactor: cacheTime-zero

re-add instant query removal after fetching, because fetching via `queryClient.fetchQuery` will not remove the query otherwise, because the normal gc-mechanism now checks for `hadObservers` due to a suspense issue :/

* refactor: cacheTime-zero

weird edge case: the previous logic was instantly removing the query _while_ it was still fetching, which is something we likely don't want. The data will stay in the currentQuery of the observer if the observer unsubscribes but still exists, and a new subscription will pick it up, unless the query was explicitly cancelled or the abort signal was consumed.

* refactor: cacheTime-zero

we need to wait a tick because even cacheTime 0 now waits at least a setTimeout(0) to be eligible for gc

* refactor: cacheTime-zero

schedule a new garbage collection after each new fetch; this won't do anything  when you still have observers, but it fixes an edge case where prefetching took longer than the cacheTime, in which case the query was again never removed

test needed adaption because we don't instantly remove, but deferred by a tick

* refactor: cacheTime-zero

stabilize test

* refactor: cacheTime-zero

apply a different suspense "workaround": do not garbage collect when fetching optimistically (done only by suspense) - gc will kick in once an observer subscribes; this will make sure we can still gc other fetches that don't have an observer consistently, like prefetching when the fetch takes longer than the gc time (which was leaking with the old workaround)

* refactor: cacheTime-zero

remove leftover

* refactor: cacheTime-zero

since every fetch triggers a new gc cycle, we don't need to do this in a loop anymore
also, reset isFetchingOptimistic after every fetch

* add publishing capabilities for alpha branch

* fix(queryFilters): fetchStatus to queryFilters (#3061)

Co-authored-by: Eddy <[email protected]>
Co-authored-by: Eddy Vinck <[email protected]>
Co-authored-by: Prateek Surana <[email protected]>
Co-authored-by: Rene Dellefont <[email protected]>

BREAKING CHANGE: new query filters, query key must be an array

* refactor(core): refactor internals from classes to a functions (#3066)

* refactor(core): refactor retryer from a class to a function

* refactor(core): refactor notifyManager from a class to a function

* refactor(core): refactor notifyManager from a class to a function

remove outdated comment

* feat(useQueries): v4 api to take an object as input (#3071)

* feat(useQueries): update API to use object syntax

New v4 API - instead of taking an array of queries, `useQueries` now accepts an object with a `queries` key. The value of this key is an array of queries (this array is unchanged from v3).

* test(useQueries): update tests for new API

* docs(useQueries): update docs for v4 API

* refactor(tests): adapt useInfiniteQuery test

copied over from the react-18 branch, because that impl is less flaky

* refactor(tests): adapt useInfiniteQuery test

another one copied over from the react-18 branch, because that impl is less flaky

* refactor: use a set for tracked props (#3085)

* refactor: make listeners required

because the only place where we pass no listener in is in tests

* refactor: make notifyOnChangeProps a Set

* chore: update tooling (#3086)

* chore: update caniuselite

* chore: remove const-enum babel plugin

because we don't use const-enums anymore

* chore: require ts 4.1

* chore: update rollup and plugins

* chore: update typescript and ts-eslint

* refactor: remove notifiable base class

this abstraction costs more than the simple duplication, and we also have other notify functions which were not unified

* fix(queryObserver): defer tracking of error prop when useErrorBoundary is on (#3087)

adding "error" to the list of tracked properties will result in us _only_ tracking error if we want to track all properties implicitly by _not_ observing any properties (because we check for trackedProps.size). Moving the adding of "error" to _after_ the size check fixes this

* docs: Update migrating-to-react-query-4.md (#3096)

* refactor: remove logging in prod mode (#3103)

to not log to the console per default; to access process.ENV, we need to enable node typings, which screws with setTimeout / setInterval, as typings are different for node and the browser; I tried to keep the changes to type-level only

* refactor: remove cancel method as it no longer exists (#3142)

* refactor: remove cancel method as it no longer exists

it wasn't doing anything in that test

* refactor: remove cancel method as it no longer exists

use signal in playground example instead of cancel fn

* refactor: remove unused query.setDefaultOptions

* feat(persistQueryClient): improve persist controls (#3141)

* feat(persistQueryClient): improve persist controls

add restore/save/subscribe

* docs: update persistQueryClient and hydration

* docs: describe new persist features

* docs(persistQueryClient): correct option defaults

* feat(persistQueryClient): enable unsubscribe

* docs(persistQueryClient): clarify restoration

* docs(persistQueryClient): enable unsubscribe note

* fix(persistQueryClient): subscribe awaits restore

* docs: clarify caching behavior (#3221)

The example contains at least one inacurate statement,

> It will then cache the data using `'todos'` and `fetchTodos` as the unique identifiers for that cache.

and could benefit from more precise language.

* fix(core): do not refetch disabled queries (#3223)

* fix(core): do not refetch disabled queries

with refetchQueries or invalidateQueries + refetchType "inactive"

disabled queries (=queries that have observers which are all enabled:false) are matched as "inactive"; this is okay when searching for them via findAll or for removeQueries, but the docs clearly state that refetchQueries / invalidateQueries do not refetch disabled queries, and that the only way to refetch them is via refetch returned from useQuery; this is important when using enabled to signal that some dependencies are not yet ready

some tests needed to be adapted because we used disabled observer + refetchQueries a lot. The easiest way to emulate the observers we wanted here was mostly with initialData + staleTime, and to get a real inactive query, we just need to subscribe + unsubscribe immediately

* fix(core): do not refetch disabled queries

add tests for refetchQueries + disabled

* fix(core): do not refetch disabled queries

update test to make more sense - title said disabled queries, but we had no disabled query; test now does the opposite of what it did before, but that's what this PR does :)

* refactor(mutation): remove mutation.cancel (#3225)

as it wasn't really aborting the request - there is no AbortSignal for Mutations atm.

* refactor(queryClient): add dev warning with queryDefaults (#3249)

* refactor(QueryClient): add dev warning

Warn when several query defaults match a given key.
Could be error prone if the returned defaults are not the expected ones.
The order of registration does matter.

* test(QueryClient): warning with defaults options

Highlight how query defaults registration order matters.

* doc(QueryClient): add notes about query defaults

In `getQueryDefaults`, the **first** matching default is returned.
In `setQueryDefaults`, highlight how the registration order is important.

* doc(QueryClient): fix link to documentation

* test(QueryClient): better test

* refactor(QueryClient): use internal logger

* doc(QueryClient): fix markup

* doc(QueryClient): remove extra entry

* refacto(QueryClient): warn about several query defaults

Warning must be displayed any time a conflict is detected, not just for dev build.
The warning is aimed at helping developers *using* react-query, not those *developping* react-query.

* Update src/core/queryClient.ts

Remove useless optional chaining.

Co-authored-by: Dominik Dorfmeister <[email protected]>

* feat(utils): add assert helper

* refactor(QueryClient): add dev warning for mutation defaults

* Revert "feat(utils): add assert helper"

This reverts commit 05c3fe19cd3277bd99740564c2e771412b7cf109.

* refactor(QueryClient): error when several defaults

Review how the check for multiple defaults  on a key is raised.
Ensure it remains fast in release build.

* refactor(QueryClient): inline code

Co-authored-by: Guillaume Labat <[email protected]>
Co-authored-by: Dominik Dorfmeister <[email protected]>

* chore: fix silent merge conflicts

* feat: Bail out if query data undefined (#3271)

* Bail out if query data undefined

* Fix failing test

* docs: migration guide for undefined data

* docs: update setQueryData reference

* Update docs/src/pages/guides/migrating-to-react-query-4.md

Co-authored-by: Louis Law <[email protected]>
Co-authored-by: Dominik Dorfmeister <[email protected]>

* chore: add a test to ensure that callback on .mutate are only called for the last observer

* docs: Document compression use case for `createWebStoragePersister` (#3285)

Add an example on how to `compress`/`decompress` data from local storage in case you need to cache large payloads.

Context: https://github.com/tannerlinsley/react-query/pull/2864#issuecomment-1034604428

* refactor: inline / remove some functions for size improvements (#3289)

* refactor: size

inline reducers in query and mutation because they are only used from dispatch

* refactor: remove default case in reducers

actions are only produced by our own code, which is in TypeScript, so we'll get a type error if there is an action not handled. Unknown actions can't exist, as the tests show: we'd need a ts-expects-error to go this way

* refactor: inline executeMutation

because it's only used once

* refactor: inline getObserver and updateObservers in useQueries

because it's only used once

* refactor: extract getDefaultState

getDefaultState is a pure function, with no access to `this`, so we can extract it. This is in-line with what `mutation` is doing

* refactor: remove getNextResult

it was only used in tests, and it's also not documented

* refactor: inline clearTimers

because it's only used once

* refactor: inline shouldNotifyListeners

because it's only used once

* refactor: inline resumePausedMutations

* refactor: tests

every stubbed queryFn needs a mock implementation to avoid console errors:

Error: Query data cannot be undefined

* refactor: do not log undefined query data warning to the console

* feat: Version 4 codemods (#3195)

* chore: add `jscodeshift` library to dev-dependencies

We're planning to deliver codemods for the next release, so we will
need this package to write codemods.

* chore: add `@types/jscodeshift` library to dev-dependencies

* chore: add an empty `jest` config file under the `codemods` directory

For some reason the `moduleNameMapper` causes an error when running the
codemod tests, it results in a `transformer is a not function` type
error. In order to avoid this now, I add an empty config file and will
investigate the root cause of the issue later.

* chore: add a very basic codemod implementation and tests

The current codemod is able to change the usages of `useQuery`
according to the new API, so it will put the existing parameters into
an object and pass it as the only parameter, but that's all. More
changes coming soon.

* chore: fix `prettier` errors in `use_query` codemod

* chore: add missing `export` keywords to test suites in case of `use_query` codemod

I just want to avoid `eslint` errors in the IDE.

* feat(codemod): add basic codemods for query client methods

* feat(codemod): add basic `useQueries` codemods

* refactor(codemod): rework `useQuery` related codemods

* feat(codemod): move files under `v4` directory

We decided to move the version 4 related codemods under a separate
directory.

* chore(codemod): move `jscodeshift` library from `dependencies` to `devDependencies`

Accidentally I added this package under `dependencies` but it should be
placed under `devDependencies`.

* chore(codemod): pick up codemods test by `npm test`

From now the `npm test` command will execute the codemod tests as well.

* refactor(codemod): remove `without-parameter` test case in case of `queryClient` related codemods

This test case is not useful at all, it just adds extra code.

* chore(codemod): remove duplications from `queryClient` codemod testfixtures

The number of duplications was just simply too much. It doesn't make
any sense to maintain repetitive boilerplate code.

* chore(codemod): rename `first-parameter-is-identifier` and `object-expression-parameter` test case

* chore(codemod): rework `first-parameter-is-identifier` and `object-expression-parameter` test suites

In these two test cases, we should try to collect as many test cases
as possible.

* chore(codemod): remove duplications from `useQuery` codemod testfixtures

The number of duplications was just simply too much. It doesn't make
any sense to maintain repetitive boilerplate code.

* chore(codemod): add missing methods to the object syntax aware query client codemods

The following methods were missing:
- fetchInfiniteQuery
- fetchQuery
- prefetchInfiniteQuery
- prefetchQuery

* chore(codemod): add some more test cases to the `parameter-is-object` test suite

* feat(codemod): add basic `useMutation` codemods

* refactor(codemod): rename `queryKey` replacer and error, because now the key name can be parameterized

* feat(codemod): add support for template literals

* refactor(codemod): rename `object-syntax-aware` test to `query-client-methods`

I want to combine two tests into a single one.

* refactor(codemod): move testfixtures to the root level of `__testfixtures__` directory

* refactor(codemod): combine the two `queryClient` codemods and test suites into a single one

* refactor(codemod): move `useMutation` related parts and testfixutes to `useQuery` codemod

The plan is to combine all existing codemods into a single one.

* refactor(codemod): remove the whole `use_mutation` library

Regarding the necessary parts that were moved to the `useQuery`
codemod, we don't need the leftover code anymore.

* feat(codemod): add support for the following hook calls:

- `useIsFetching`
- `useIsMutating`

* refactor(codemod): move `useQueries` related parts and testfixutes to `useQuery` codemod

The plan is to combine all existing codemods into a single one.

* refactor(codemod): remove the whole `use_queries` library

Regarding the necessary parts that were moved to the `useQuery`
codemod, we don't need the leftover code anymore.

* refactor(codemod): introduce `transformUseQueryLikeUsages` function

Maybe this change will make the code read easier a bit.

* refactor(codemod): do some refinements on the following tests:

- `parameter-is-identifier`
- `parameter-is-object-expression`

* fix(codemod): in the case of JS, the string literal might be interpreted as `Literal`

So without the additional `Literal` check, the codemod wouldn't be
applied.

* fix(codemod): remove `type` filter from import declarations

This filter seems to be too strict because the codemods were not
applied to the `examples` directory.

* refactor(codemod): move `QueryClient` related parts and testfixutes to `useQuery` codemod

The plan is to combine all existing codemods into a single one.

* refactor(codemod): remove the whole `query_client_methods` library

Regarding the necessary parts that were moved to the `useQuery`
codemod, we don't need the leftover code anymore.

* refactor(codemod): simplify entry point of the codemod

It makes the code a bit slower, but on the other hand, it makes the
code easier to read and understand.

* feat(codemod): add basic `QueryCache` codemods

* fix(codemod): do not transform array expression query keys

We want arrays as query keys, so when the current query key is an
array, we don't need to transform it.

* fix(examples/playground): fix invalid usage of `invalidateQueries`

* feat(codemod): show file path in console warnings

* refactor(codemod): remove `use_query` directory

We decided to group the codemods by major version numbers instead of
types. The reason is simple: we will bundle all necessary
transformations into a single file, so the consumers will have to
apply only one codemod. Hopefully, it will make the DX better.

* refactor(codemod): rename `use-query` to `key-transformation`

The original `use-query` name is not valid anymore, because the
codemod changes the signature of other function/method calls as well.

* refactor(codemod): replace the transformer name in `key-transformation` codemod

I renamed the transformer with the test, so the transformer name also
needs to be updated in the test file.

* chore(codemod): add codemod and utilities to the bundle

We want the code mod to be part of the bundle. If it's part of the
bundle, the consumers can directly access it through the `node_modules`
directory and run it. We just simply would like to increase the DX.

* refactor(codemod): rename function

I shouldn't have committed this. :')

* fix(codemod): keep `typeArguments` of the node

It will prevent the removal of type annotations on a function/method
call.

* refactor(codemod): move `query-cache` test cases to `default-import`

We want to cover the default, named, and namespaced imports in the
case of `QueryCache` as well.

* feat(codemod): add support for named imports in case of `QueryCache` and `useQueryCache`

The codemod must be able to transform usages in the case of named
imports as well.

* fix(codemod): always return `Identifier` instance in case of `findImportIdentifier` of function

Previously it returned a string as a default value and it could lead
to errors in the code.

* feat(codemod): add support for namespaced imports in case of `QueryCache` and `useQueryCache`

The codemod must be able to transform usages in the case of namespaced
imports as well.

* refactor(codemod): re-use the previously written utility functions in the hook call transformer

By this, we can achieve the same functionality with less code
repetition.

* refactor(codemod): re-use the previously written utility functions in the query-client transformer

By this, we can achieve the same functionality with less code
repetition.

* refactor(codemod): rename `hook-call-transformer` to `use-query-like` transformer

I think this name describes better the purpose of this transformer.

* chore(codemod): add todo about the `react-query` import check

We shouldn't transform files that don't contain `react-query` imports.

* refactor(codemod): make the `use-query-like-transformer` to look the same as other transformers

I just want to follow the structure of other transformers.

* fix(codemod): do not log warnings in the test environment

Warning the user about the unprocessable query keys is useful in
production, but in the test environment, it just makes it more
difficult to read the output.

* docs(codemod): add instructions how to apply codemods

* chore(examples): apply codemod on the `examples` directory

* docs(codemod): update `Codemod` section

The suggested text sounds better. :)

Co-authored-by: Dominik Dorfmeister <[email protected]>

Co-authored-by: Dominik Dorfmeister <[email protected]>

* feat: remove idle state (#3302)

* feat: remove idle state

in favor of status: loading & fetchStatus: idle

* feat: remove idle state

remove isIdle boolean

* feat: remove idle state

documentation around the removed idle state and the new fetchingStatus

* feat: remove idle state

add missing ' to docs

* feat(*): add optional logger prop to QueryClient config (#3246)

- remove setLogger
- add optional `logger` prop to QueryClientConfig
- add getLogger public method to QueryClient
- add optional `logger` prop to QueryConfig and MutationConfig
- add getDefaultLogger function which returns a default logger based on
environment, which is used by everything that takes an optional logger
in their config
- add createQueryClient test util function that uses a mock logger
- replace all `new QueryClient` calls with createQueryClient calls
- remove mockConsoleError and usages from tests, which are not necessary anymore

BREAKING CHANGE: remove setLogger

* refactor: turn off error logging in tests

the global `clearMocks: true` should make sure that this gets reset after every test

* docs(examples): fix optimistic-updates-typescript example

* chore(bundling): bundle for modern browsers (#3342)

* chore(bundling): update babel dependencies

* chore(bundling): remove babel-plugin-transform-async-to-promises

we don't use async functions, and we also want to target envs that support async functions

* chore(bundling): update supported browsers

for a more modern output

* chore(bundling): tweak browserslist

and exclude transform-parameters plugin, which comes in because of any safari version, even though it should not be needed according to caniuse. This plugin transforms ES2015 parameters to ES5, this includes: Destructuring parameters, Default parameters and Rest parameters, all of which are supported by Safari

* chore(bundling): update terser

* chore(bundling): fix tests

ReferenceError: Cannot access 'promiseResolve' before initialization

* chore(bundling): docs about supported browsers

* chore(bundling): small docs fixes

* chore: eslint no-unnecessary-condition (#3344)

* chore(eslint): turn on no-unnecessary-condition rule

* chore(eslint): turn on no-unnecessary-condition rule

remove unnecessary optional chainings in tests

* chore(eslint): keep the matchMedia check

even though it can never be undefined, except in tests, and I couldn't figure out how to mock that properly

* chore(eslint): remove unnecessary checks in devtools

* chore(eslint): addEventListener should exist on window

if window is defined, which is checked by isServer

* chore(eslint): assign default object to options

instead of re-assigning it. In any case, the optional chaining is unnecessary

* chore(eslint): action.type should always be defined

* chore(eslint): keep the fallback for console

* chore(eslint): one rule always complains

so up-casting false to boolean

* chore(eslint): if we have a behaviour, we also have na onFetch

* chore(eslint): parseFilters always returns an object

as it falls back to an empty object internally, so the falsy check didn't do anything

* chore(eslint): upcast previous result to be potentially undefined

to make the optinal chains necessary

* fix issues after updating to alpha

* fix(mutations): avoid infinite loading states if callbacks return an error (#3343)

* fix(mutations): avoid infinite loading states if callbacks return an error

add failing test cases

* fix(mutations): avoid infinite loading states if callbacks return an error

by making sure we always dispatch the error to go to error state internally;
re-writing to async-await because it has better support than promise.finally, and the flow is also easier to reason about here

* fix(mutations): fix merge conflicts

* fix(react-native): bring back check for window.addEventListener (#3345)

because it does not exist in RN, but window is defined

* refactor(queryObserver): get rid of double-defaulting of options in getOptimisticResult

every call to getOptimisticResult already contains defaulted options, which we can enforce on type level by only accepting DefaultedQueryObserverOptions

* fix(createAsyncStoragePersister): persistClient respects throttleTime (#3331) (#3336)

* docs: update persistQueryClient.md with Persister docs (#3356)

* docs: add idb example

* docs: consolidate sections
storing ~> persistQueryClientSave
restoring ~> persistQueryClientRestore

* docs: create section for persisters

* docs: focus cacheTime docs
persistQueryClient and createWebStoragePersister are unrelated

* docs: add tip for indexed db

* docs: cleanup intro

* docs: note additional interfaces available

* docs: reorder api to be more intuitive

* docs: improve wording

* docs: add Offline React Query post (#3320)

* docs: multi-line code snippet for layout on mobile

* fix(mutations): allow passing a function to useErrorBoundary (#3390)

* docs: idle state is removed

* feat: Support the ability to provide a context (#2548)

* Support providing a context

* Addressing comments and merge conflicts from rebase

* feat(persistQueryClient): PersistQueryClientProvider (#3248)

* feat(persistQueryClient): PersistQueryClientProvider

* feat(persistQueryClient): PersistQueryClientProvider

defer subscription if we are hydrating

* feat(persistQueryClient): PersistQueryClientProvider

make sure we do not subscribe if the component unmounts before restoring has finished

* feat(persistQueryClient): PersistQueryClientProvider

make unsubscribe a const so that we don't mutate what we've exposed

* feat(persistQueryClient): PersistQueryClientProvider

make hydrating queries go in fetchStatus: 'idle' instead of paused

because paused means we have started fetching and are pausing, and we will also continue, while with hydration, we haven't started fetching, and we also might not start if we get "fresh" data from hydration

* feat(persistQueryClient): PersistQueryClientProvider

don't export IsHydratingProvider, as it shouldn't be needed by consumers

* feat(persistQueryClient): PersistQueryClientProvider

provide onSuccess and onError callbacks to PersistQueryClientProvider so that you can react to the persisting having finished, to e.g. have a point where you can resumePausedMutations

* feat(persistQueryClient): PersistQueryClientProvider

tests for onSuccess callback, and remove onError callback, because the persister itself catches errors and removes the store

* feat(persistQueryClient): PersistQueryClientProvider

test for useQueries

* feat(persistQueryClient): PersistQueryClientProvider

docs

* make restore in mockPersister a bit slower to stabilize tests

* better persistQueryClient docs

* feat(PersistQueryClientProvider): make sure we can hydrate into multiple clients

and error handling

* offline example

* extract to custom hook

* remove onError callback

because errors are caught internally by persistQueryClient and the persisted client is then removed

* just ignore stale hydrations if the client changes

* Revert "just ignore stale hydrations if the client changes"

This reverts commit 91e2afb7ba5b08dc86a188d7b9b21d07a8e3c440.

* just ignore stale hydrations if the client changes

this makes sure we only call onSuccess once, for the "latest" client

* since QueryClientProviderProps is now a union type, we can't extend it from an interface

* feat(cacheTime): default cacheTime to Infinity for SSR (#3377)

* feat(cacheTime): default cacheTime to Infinity for SSR

Cache persists for the lifecycle of request and can be immediately GCed afterward

Helps close Node process immediately after use

* docs: Add default server-side cacheTime to migration docs

* docs(examples): fix offline example (#3463)

* docs(examples): remove non-existing / unused imports

* docs(examples): add missing msw dependency

and fix some more things

* fix(persistQueryClient): subscribe to both QueryCache and MutationCache

* feat: add support for react 18

* feat(react): react-18

update react dependencies and add use-sync-external-store polyfill

* feat(core): react-18

use a version of uSES that actually has an implementation other than "Not Yet Implemented"

* feat(core): react-18

looks like we also need the experimental version of react, because v18-alpha doesn't support uSES yet.

* feat(core): react-18

update testing-library to v13 alpha

* feat(core): react-18

do not update currentResult when it is equal to the previousResult, because we use the currentResult as snapshot for uSES, so it must be as stable as possible

* feat(core): react-18

switch forceUpdate with uSES.

- I'm not sure if the `updateResult` effect is still necessary, or if it's guaranteed that we can't miss any updates because we don't subscribe in an effect anymore; tests behave the same with / without it - tbd
- subscribe must be stable, or else we wind up in an infinite loop. in order to be able to pass `observer.subscribe`, we must bind the function in the constructor

* feat(core): react-18

make the first test a bit more stable - we don't want more than 2 results

* feat(core): react-18

fix type issues in devtools tests, so we adhere to the new typings of testing-library v13

* feat(core): react-18

make devtools test more resilient: act throws an error in the latest version if used liked that, but we don't need it. We can just click the button and use waitFor, as documented here: https://testing-library.com/docs/guide-disappearance#2-using-waitfor

* feat(core): react-18

don't re-assign result

* feat(core): react-18

bring back the optimistic result; this is debatable because it means we actually _ignore_ whe result returned by uSES, but it makes for fewer re-renders as we can go back to silently update from the effect

* feat(core): react-18

useIsFetching to uSES

I don't fully understand the test that needed adaption, but the new numbers actually look more correct. The first thing that happens is showing the SecondQuery (after 50ms), and at that time, the FirstQuery is already fetching, so why should there be two zeros in the result array ...

judging from the console mock assertion, we are testing if state hasn't been updated on an unmounted component, which now can't happen anymore with uSES, so we can remove it

* feat(core): react-18

useIsMutatating to uSES

As a positive side-effect, there seem to be fewer re-renders now - the new numbers in the tests do make sense

* feat(core): react-18

useMutation to uSES

one big change is moving `setOptions` into a useEffect - similar to what `useQuery` is doing. However, we have no `getOptimisticResult` in useMutation, so we'll have to see how this behaves

the tests need some love - it's generally working, but the way the tests are written, we're getting some failure.

* feat(core): react-18

wait for heading to to to value `3` before asserting the onSuccess / onSettled calls

* feat(core): react-18

rewrite test to getByRole

* feat(core): react-18

since we're not returning anything from onError or onSettled in the tests, the mutation updates the data on the screen before the callbacks have finished running, which is why the test needs to waitFor the callbacks to have been called

* feat(core): react-18

work around console error from uSES by moving the console mock to the client part and / or increasing the assertion count for now

* feat(core): react-18

there seems to be one less rendering, likely because of batching, getting rid of one render that has the same assertions as the previous state, which is nice

* feat(core): react-18

update shim

* feat(core): react-18

update to v18 alpha, which should had the native uSES impl

* feat(core): react-18

bump uSES

* feat(core): react-18

count renders correctly by incrementing the count in useEffect

* feat(core): react-18

bump everything and import from /shim

* feat(core): react-18

make test more resilient by not using fireEvent

* feat(core): react-18

use findByText for more resilient tests

* feat(core): react-18

test against react 17 and react 18

* feat(core): react-18

only run bundlewatch once

* feat(core): react-18

give a better name

* feat(core): react-18

useQueries to uSES

* feat(core): react-18

really upgrade react (with exact versions, because alphas)

* feat(core): react-18

remove version logging

* feat(core): react-18

remove fixed version in test:ci script

* feat(core): react-18

try to get rid of warning in suspense test

* feat(core): react-18

remove wrongful mock assertion - uSES should not console.error anymore

* feat(core): react-18

add missing server-side snapshots

* feat(core): react-18

fix build, error is:

[!] Error: 'useSyncExternalStore' is not exported by node_modules/use-sync-external-store/shim/index.js, imported by src/react/useIsFetching.ts
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

* feat(hydration): remove hydration package (#2936)

* V4: streamline cancel refetch (#2937)

* feat: streamline cancelRefetch

the following functions now default to true for cancelRefetch:

- refetchQueries (+invalidateQueries, + resetQueries)
- query.refetch
- fetchNextPage (unchanged)
- fetchPreviousPage (unchanged)

* feat: streamline cancelRefetch

make sure that refetchOnReconnect and refetchOnWindowFocus do not cancel already running requests

* feat: streamline cancelRefetch

update tests

refetch and invalidate now both cancel previous queries, which is intended, so we get more calls to the queryFn in these cases

* feat: streamline cancelRefetch

add more tests for cancelRefetch behavior

* feat: streamline cancelRefetch

update docs and migration guide

* feat: streamline cancelRefetch

simplify conditions by moving the ?? true default down to fetch on observer level; all 3 callers (fetchNextPage, fetchPreviousPage and refetch) just pass their options down and adhere to this default; refetch also only has 3 callers:
- refetch from useQuery, where we want the default
- onOnline and onFocus, where we now explicitly pass false to keep the previous behavior

and add more tests

* feat: streamline cancelRefetch

we always call this.fetch() with options, so we can just as well make the mandatory

also, streamline signatures by destructing values that can't be forwarded (and use empty object as default value) in options and just spread the rest

* feat: streamline cancelRefetch

fix types for refetch

it was accidentally made too wide and allowed all refetchFilters, like `predicate`; but with `refetch` on an obserserver, there is nothing to filter for, except the page, so that is what we need to accept via `RefetchPageFilters`

* feat: streamline cancelRefetch

refetch never took a queryKey as param - it is always bound to the observer

* feat: better query filters (#2938)

* feat(core): react-18

bump dependencies to beta

* feat(core): react-18

fix assertions about special react markup

* feat(core): react-18

try to make ssr hydration tests work, but skip them for now

* feat(core): react-18

bring back batching. for this to work, we need to batch the actual calls to `onStoreChange` received from uSES, and scheduleMicroTask also needs to defer one tick with setTimeout (couldn't find a better way)

* feat(core): react-18

reduce timeout to make test less flaky

* feat(core): react-18

fix useIsMutating tests: The same value can't really appear twice in the array because re-renders are batched; this seems like a nice improvement due to uSES

* feat(core): react-18

make tests slower; it seems that batching together with a sleep(0) actually batches fast responses together, so we now go directly from idle to success

* fix: rename react directory to reactjs (#2884)

* fix: rename react directory to reactjs

the directory being named "react" causes an error with the moduleDirectories option from jest

* fix: update package.json files to match the updated reactjs directory name

* fix: change react test utils imports to match new directory name

* docs(v4): add renamed reactjs details to migration guide

Co-authored-by: Eddy Vinck <[email protected]>

* feat: mutation cache duration (#2963)

* feat: mutation cachetime

stramline queryCache / mutationCache events by combining them into notifiable.ts

* feat: mutation cachetime

removable

* feat: mutation cachetime

add gc to mutations

* feat: mutation cachetime

streamline event types between queries and mutations

* feat: mutation cachetime

tests, and I forgot to implement optionalRemove, so make it abstract

* feat: mutation cachetime

replicate gc behavior from https://github.com/tannerlinsley/react-query/pull/2950 and add more tests

* feat: mutation cachetime

get test coverage back to 100%

* feat: mutation cachetime

docs

* feat: mutation cachetime

try to make tests more resilient

* feat: mutation cachetime

fix imports after merge conflict

* feat(core): react-18

make ssr tests work in react 18: the updated fetch count is actually correct, as we always fetch once on the server, then sometimes another time on the client. see also this discussion: https://github.com/TkDodo/react-query/pull/2/files#r751305071

* feat(core): react-18

try to make tests work in 17 and 18
because of the different batching, we sometimes get different results, which we can avoid by making the tests really async and do some data fetching that takes at least some time, and write the tests more resilient

* feat(core): react-18

resilient tests

* refactor(persistQueryClient): Make persistQueryClient stable (#2961)

* :truck: Remove experimental from persist-query-client

* :truck: Rename persistor -> persister

* ✏️  Fix Persistor -> Persister in imports

* :truck: Update name in rollup config

* :truck: Move createAsyncStoragePersister and createWebStoragePersister to stable version and rename persistor -> persister

* 📝  Update documentation

* 📝   Add migrating to v4 docs

* Apply suggestions from code review

Co-authored-by: Dominik Dorfmeister <[email protected]>

* feat(core): react-18

continue to stabilize tests

* 2964 changes to on success callback (#2969)

* feat(useQuery): onSuccess callback

do not call onSuccess if update was done manually from setQueryData

* feat(useQuery): onSuccess callback

test that onSuccess is not called when setQueryData is used

* feat(useQuery): onSuccess callback

docs changes

* feat(useQuery): onSuccess callback

options spread is wrong - `updatedAt` is actually `dataUpdatedAt`. Oddly we didn't have a test, so I added one

* 2919 query key array (#2988)

* feat: query key array

remove code that internally ensures that we get an Array, because it is now the expected interface, ensured by TypeScript

* feat: query key array

update tests to the new syntax

* feat: query key array

fix assertions, because there is no array wrapping happening internally anymore. The key you receive from the context is exactly the key you passed in

* feat: query key array

this test doesn't make much sense anymore

* feat: query key array

 wrapping in an extra array doesn't yield the same results anymore since v4 because keys need to be an array

* feat: query key array

make docs adhere to new array key syntax

* feat: query key array

migration docs

* feat(QueryObserver): track queries as default (#2987)

* feat(Query Options): remove notifyOnChangePropsExclusion

- remove related code from queryObserver
- remove type def
- remove related tests

* docs(Query Options): update notifyOnChangePropsExclusion sections

- remove from api references
- add to v4 migration guide

* feat(QueryObserver): "tracked" as default behavior

- remove "tracked" completely if notifyOnChangeProps is not defined, behave as v3 "tracked"
- add `notifyOnChangeProps: 'all' to opt out of the smart tracking

TODO: Now that default behavior has changed, work out the failed tests. Which parts to change for current ones and possibly write new ones.

* test(useQuery): adjust tests to pass for notifyOnChangeProps udpate

* test(useInfiniteQuery): adjust tests to pass for notifyOnChangeProps udpate

* test(QueryResetErrorBoundary): adjust tests to pass for notifyOnChangeProps udpate

* refactor(QueryObserver): use nullish coalescing operator

much cleaner than the negated if I started with

* test(QueryResetErrorBoundary): remove "tracked" from test

* revert: test(QueryResetErrorBoundary): adjust tests to pass for notifyOnChaneProps udpate

This reverts commit a34b4720675dad5ee6ebde401639f328c0c83122.

The changes are not necessary after PR #2993 fix.

* refactor(QueryObserver): combine prop checks

* docs(notifyOnChangeProps): update docs to reflect new api

* refactor: Remove deprecated promise cancel (#2996)

* :fire: Remove the cancel method on promise for cancelling promise

* ✅  Fix query client tests

* ✅   Update query and useQuery tests

* ✅   Update use infinite query tests

* 📝   Update migartion guide

* :bug: Fix linking in documentation

* :pencil: Fix grammatical errors in docs

Co-authored-by: Dominik Dorfmeister <[email protected]>

* :refactor: Use abortSignal for query cancellation in InfiniteQueryBehavior

* 🚨  Fix lint errors

* :recycle: Move define signal property to a separate function

Co-authored-by: Dominik Dorfmeister <[email protected]>

* remove test that doesn't make sense anymore - we don't allow different falsy query keys now

* feat(core): react-18

re-add missing import after merge conflicts

* feat(core): react-18

we need to observe isFetching to get a re-render with it thanks to tracked queries being on per default now

* feat(core): react-18

observe fields we are actually checking

* feat(core): react-18

stabilize tests

* feat(core): react-18

make one specific test assert differently for react17/18 because batching with uSES works slightly differently I think

* feat(core): react-18

remove now unnecessary useEffect: uSES makes sure that we can't miss any query updates between creating the observer and subscribing to it, even if the shim is used

* feat(core): react-18

stabilize useQueries test: since both queries have the same timeout, it seems that the initial updates are now batched, leading to 1 less re-render

* feat(core): react-18

stabilize useQueries test: a little less rerenders

* feat(core): react-18

stabilize useInfiniteQuery tests

* feat(core): react-18

use setActTimeout in Blink to avoid warning in react17

* feat(core): react-18

nodejs types conflict :/

* feat(core): react-18

always schedule garbage collection instead of removing directly with cacheTime 0, as callbacks might not fire otherwise

* ✅  Use getByLabelText for opening query details

* :bug: Use findBy* instead of getBy*

* feat(core): react-18

wait for button to appear before clicking it

* feat(core): react-18

seems like a broke a cacheTime: 0 test with the latest changes that I can't fix even with making the test more stable, so I'm partially reverting that change. However, we really shouldn't call `remove` directly, but always `optionalRemove` to never remove fetching queries.

* feat(core): react-18

okay, lets go back to always instantly removing if we have 0 cacheTime. Not sure why the optionalRemove breaks a test

* feat(core): react-18

stabilize flaky test - some renders seem to be batched if we don't sleep enough

* feat(core): react-18

adapt scheduleMicroTask: we don't need to defer error throwing anymore now that we always defer with sleep(0) initially, which means the test only needs to assure that the callback is not invoked immediately, but deferred by one Promise "tick"

* feat(core): react-18

fix suspense tests: since scheduleMicroTask now always defers by a promise tick (setTimeout(0)), and callbacks are batched into this, it takes one tick longer until the callbacks are invoked; we can "fix" that with a sleep(0) in the tests, or just by using waitFor to wait until the callbacks have been called

* ✅   Make sorting test more robust

* ✅  Make queries dependent on each other

* 2927 offline queries (#3006)

* feat(useQuery): offline queries

remove defaultQueryObserverOptions because it is the same as defaultQueryOptions and we can just use that

* feat(useQuery): offline queries

setup dependent default values, to make it easier to work with them

* feat(useQuery): offline queries

basic changes to retryer:
- pause the query before fetching depending upon networkMode
- pause retries depending upon networkRetry

* feat(useQuery): offline queries

move networkRetry and networkMode defaults to the retryer creation, because we need the same for mutations

* feat(useQuery): offline queries

decouple focus and online manager: we're now informing caches of a focus when we're focussed, and about an online event if we come online; if the retryer continues, it can then decide to not fetch depending on our networkMode

* feat(useQuery): offline queries

expose isPaused on the queryResult and make sure isFetching is false when we are paused

* feat(useQuery): offline queries

knowing if we can fetch depends on if we are paused or not, as other conditions should apply

also, rename options (not sure if that will stick though)

* feat(useQuery): offline queries

adjust existing tests for isPaused being exposed

* feat(useQuery): offline queries

fix existing test by setting options to emulate the previous behaviour, otherwise, with `mockNavigatorOnline` being set to false right from the start, the mutation would never fire off

* feat(useQuery): offline queries

adapt onOnline, onFocus tests to new behavior: they are now decoupled, and onOnline is always called even when not focused and vice versa. The retryer should make sure to not continue fetching if necessary

* feat(useQuery): offline queries

first test for networkMode

* feat(useQuery): offline queries

isFetching and isPaused are now derived and stored together in a fetchingState enum (idle, fetching, paused)

* feat(useQuery): offline queries

better networkMode api: online, always, offlineFirst (basically always but with paused retries)

* feat(useQuery): offline queries

more tests for networkMode: online

* feat(useQuery): offline queries

more tests for networkMode: online

* feat(useQuery): offline queries

tests for networkMode: always

* feat(useQuery): offline queries

fix tests that were influencing each other by using proper jest mocks for online and visibility state

* add paused queries to the devtools.tsx

* feat(useQuery): offline queries

never stop pausing when continueFn is called. Initially, I only had this guard for when it's called from the outside, e.g. for onWindowFocus while still being offline, but we need this always because otherwise query cancellation can potentially continue a paused query

* feat(useQuery): offline queries

okay, pausing multiple times was a bad idea, continueFn() will be called eventually anyways

* feat(useQuery): offline queries

attempt at offline toggle button

* feat(useQuery): offline queries

different icons, padding, color

* feat(useQuery): offline queries

i messed up the icon order

* feat(useQuery): offline queries

guard against illegal state transitions: paused queries can unmount or get cancelled, in which case we shouldn't continue them, even if we dispatch the continue event

* feat(useQuery): offline queries

fix devtools tests, account for paused queries

* Revert "feat(useQuery): offline queries"

This reverts commit a647f64a051ca4c02a872e7871b4b2ce49aeda2c.

* feat(useQuery): offline queries

keep the do-not-start logic out of the run function, and thus out of promiseOrValue. if the promise has already been resolved in the meantime, e.g. because of a `cancel`, the run method will just do nothing, while the previous logic would've started to fetch

* feat(useQuery): offline queries

show inactive as higher priority than paused

* feat(useQuery): offline queries

make sure that optimistic results don't show an intermediate fetching state, but go opmistically to paused instead

* feat(useQuery): offline queries

real result needs to match optimistic result

* feat(useQuery): offline queries

stupid mistake

* feat(useQuery): offline queries

keep status color and status label in sync

* feat(useQuery): offline queries

make networkMode param mandatory for canFetch (and default to online internally) so that we can't screw that up again

* feat(useQuery): offline queries

make sure test "finishes" to avoid prints to the console if another test goes online again

* feat(useQuery): offline queries

move cancel function to the top, as it's no longer dependent on the promise since the `.cancel` function is gone; all we need is to abort the signal and reject the promise of the retryer

* feat(useQuery): offline queries

inline canContinue, because it's now only called if the query is in paused state anyways

* feat(useQuery): offline queries

avoid the impossible state by not calling config.onContinue for already resolved queries, as that would put them right into fetching state again, without actually fetching

* feat(useQuery): offline queries

let resolved querie continue, but don't put them in fetching state

* feat(useQuery): offline queries

fix merge conflict and invert condition because no-negated-condition

* feat(useQuery): offline queries

add test for abort signal consumed - different results expected for node < 15 where we don't have AbortController, thus can't consume the signal

* feat(useQuery): offline queries

on…
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants