diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 024d8335ed..79f0ba4b4d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -21,14 +21,16 @@ jobs: - uses: pnpm/action-setup@v2.2.2 with: version: 7 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: node-version: 16.14.2 registry-url: https://registry.npmjs.org/ + cache: 'pnpm' - run: | - pnpm --filter "./packages/**" --filter query install + pnpm --filter "./packages/**" --filter query --prefer-offline install git config --global user.name 'Tanner Linsley' git config --global user.email 'tannerlinsley@users.noreply.github.com' + npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}" pnpm run cipublish env: GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 4c7e370192..b4b85648d4 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -13,12 +13,12 @@ jobs: - uses: pnpm/action-setup@v2.2.2 with: version: 7 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: node-version: ${{ matrix.node }} cache: 'pnpm' - name: Install dependencies - run: pnpm --filter "./packages/**" --filter query install + run: pnpm --filter "./packages/**" --filter query --prefer-offline install - run: | pnpm run test:ci pnpm run test:size diff --git a/.npmrc b/.npmrc deleted file mode 100644 index ae643592e7..0000000000 --- a/.npmrc +++ /dev/null @@ -1 +0,0 @@ -//registry.npmjs.org/:_authToken=${NPM_TOKEN} diff --git a/docs/guides/disabling-queries.md b/docs/guides/disabling-queries.md index fe81a8628e..b1b026cf75 100644 --- a/docs/guides/disabling-queries.md +++ b/docs/guides/disabling-queries.md @@ -19,7 +19,7 @@ When `enabled` is `false`: ```tsx function Todos() { const { - isLoading, + isInitialLoading, isError, data, error, @@ -45,10 +45,10 @@ function Todos() { isError ? ( Error: {error.message} ) : ( - (isLoading && !isFetching) ? ( - Not ready ... + isInitialLoading ? ( + Loading... ) : ( - Loading... + Not ready ... ) ) )} @@ -87,3 +87,13 @@ function Todos() { ) } ``` + +### isInitialLoading + +Lazy queries will be in `status: 'loading'` right from the start because `loading` means that there is no data yet. This is technically true, however, since we are not currently fetching any data (as the query is not _enabled_), it also means you likely cannot use this flag to show a loading spinner. + +If you are using disabled or lazy queries, you can use the `isInitialLoading` flag instead. It's a derived flag that is computed from: + +`isLoading && isFetching` + +so it will only be true if the query is currently fetching for the first time. diff --git a/docs/guides/migrating-to-react-query-4.md b/docs/guides/migrating-to-react-query-4.md index 5a84b1872a..588bf86816 100644 --- a/docs/guides/migrating-to-react-query-4.md +++ b/docs/guides/migrating-to-react-query-4.md @@ -112,6 +112,17 @@ This will mostly affect `disabled` queries that don't have any `data` yet, as th Also, have a look at [the guide on dependent queries](../guides/dependent-queries) +#### disabled queries + +Due to this change, disabled queries (even temporarily disabled ones) will start in `loading` state. To make migration easier, especially for having a good flag to know when to display a loading spinner, you can check for `isInitialLoading` instead of `isLoading`: + +```diff +- isLoading ++ isInitialLoading +``` + +See also the guide on [disabling queries](../guides/disabling-queries#isInitialLoading) + ### new API for `useQueries` The `useQueries` hook now accepts an object with a `queries` prop as its input. The value of the `queries` prop is an array of queries (this array is identical to what was passed into `useQueries` in v3). diff --git a/docs/reference/useQuery.md b/docs/reference/useQuery.md index 8efa0ad056..1777c338fa 100644 --- a/docs/reference/useQuery.md +++ b/docs/reference/useQuery.md @@ -244,6 +244,9 @@ const result = useQuery({ - `isRefetching: boolean` - Is `true` whenever a background refetch is in-flight, which _does not_ include initial `loading` - Is the same as `isFetching && !isLoading` +- `isInitialLoading: boolean` + - Is `true` whenever the first fetch for a query is in-flight + - Is the same as `isFetching && isLoading` - `failureCount: number` - The failure count for the query. - Incremented every time the query fails. diff --git a/package.json b/package.json index 62f5576f90..d489ef8162 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,7 @@ "bundlewatch": { "files": [ { - "path": "packages/**/build/umd/*.production.js" + "path": "packages/*/build/umd/*.production.js" } ] } diff --git a/packages/query-core/src/queryObserver.ts b/packages/query-core/src/queryObserver.ts index d10d84762b..7f64434d76 100644 --- a/packages/query-core/src/queryObserver.ts +++ b/packages/query-core/src/queryObserver.ts @@ -547,13 +547,16 @@ export class QueryObserver< } const isFetching = fetchStatus === 'fetching' + const isLoading = status === 'loading' + const isError = status === 'error' const result: QueryObserverBaseResult = { status, fetchStatus, - isLoading: status === 'loading', + isLoading, isSuccess: status === 'success', - isError: status === 'error', + isError, + isInitialLoading: isLoading && isFetching, data, dataUpdatedAt, error, @@ -564,13 +567,13 @@ export class QueryObserver< isFetchedAfterMount: state.dataUpdateCount > queryInitialState.dataUpdateCount || state.errorUpdateCount > queryInitialState.errorUpdateCount, - isFetching: isFetching, - isRefetching: isFetching && status !== 'loading', - isLoadingError: status === 'error' && state.dataUpdatedAt === 0, + isFetching, + isRefetching: isFetching && !isLoading, + isLoadingError: isError && state.dataUpdatedAt === 0, isPaused: fetchStatus === 'paused', isPlaceholderData, isPreviousData, - isRefetchError: status === 'error' && state.dataUpdatedAt !== 0, + isRefetchError: isError && state.dataUpdatedAt !== 0, isStale: isStale(query, options), refetch: this.refetch, remove: this.remove, diff --git a/packages/query-core/src/types.ts b/packages/query-core/src/types.ts index 9f92287eea..d77f210b9d 100644 --- a/packages/query-core/src/types.ts +++ b/packages/query-core/src/types.ts @@ -373,6 +373,7 @@ export interface QueryObserverBaseResult { isFetching: boolean isLoading: boolean isLoadingError: boolean + isInitialLoading: boolean isPaused: boolean isPlaceholderData: boolean isPreviousData: boolean diff --git a/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx b/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx index 8b14eae065..8185bb49df 100644 --- a/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx +++ b/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx @@ -84,6 +84,7 @@ describe('useInfiniteQuery', () => { isFetchingNextPage: false, isFetchingPreviousPage: false, isLoading: true, + isInitialLoading: true, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, @@ -116,6 +117,7 @@ describe('useInfiniteQuery', () => { isFetchingNextPage: false, isFetchingPreviousPage: false, isLoading: false, + isInitialLoading: false, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, diff --git a/packages/react-query/src/__tests__/useQuery.test.tsx b/packages/react-query/src/__tests__/useQuery.test.tsx index d571b93d15..72096f0a42 100644 --- a/packages/react-query/src/__tests__/useQuery.test.tsx +++ b/packages/react-query/src/__tests__/useQuery.test.tsx @@ -240,6 +240,7 @@ describe('useQuery', () => { isFetching: true, isPaused: false, isLoading: true, + isInitialLoading: true, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, @@ -266,6 +267,7 @@ describe('useQuery', () => { isFetching: false, isPaused: false, isLoading: false, + isInitialLoading: false, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, @@ -322,6 +324,7 @@ describe('useQuery', () => { isFetching: true, isPaused: false, isLoading: true, + isInitialLoading: true, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, @@ -348,6 +351,7 @@ describe('useQuery', () => { isFetching: true, isPaused: false, isLoading: true, + isInitialLoading: true, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, @@ -374,6 +378,7 @@ describe('useQuery', () => { isFetching: false, isPaused: false, isLoading: false, + isInitialLoading: false, isLoadingError: true, isPlaceholderData: false, isPreviousData: false, diff --git a/packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx b/packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx index 2ffc8e81c8..4749750c13 100644 --- a/packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx +++ b/packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx @@ -93,6 +93,7 @@ describe('useInfiniteQuery', () => { isFetchingNextPage: false, isFetchingPreviousPage: false, isLoading: true, + isInitialLoading: true, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, @@ -125,6 +126,7 @@ describe('useInfiniteQuery', () => { isFetchingNextPage: false, isFetchingPreviousPage: false, isLoading: false, + isInitialLoading: false, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, diff --git a/packages/solid-query/src/__tests__/createQuery.test.tsx b/packages/solid-query/src/__tests__/createQuery.test.tsx index 4260e27d5b..4ccfbcd55e 100644 --- a/packages/solid-query/src/__tests__/createQuery.test.tsx +++ b/packages/solid-query/src/__tests__/createQuery.test.tsx @@ -273,6 +273,7 @@ describe('createQuery', () => { isFetching: true, isPaused: false, isLoading: true, + isInitialLoading: true, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, @@ -299,6 +300,7 @@ describe('createQuery', () => { isFetching: false, isPaused: false, isLoading: false, + isInitialLoading: false, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, @@ -361,6 +363,7 @@ describe('createQuery', () => { isFetching: true, isPaused: false, isLoading: true, + isInitialLoading: true, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, @@ -387,6 +390,7 @@ describe('createQuery', () => { isFetching: true, isPaused: false, isLoading: true, + isInitialLoading: true, isLoadingError: false, isPlaceholderData: false, isPreviousData: false, @@ -413,6 +417,7 @@ describe('createQuery', () => { isFetching: false, isPaused: false, isLoading: false, + isInitialLoading: false, isLoadingError: true, isPlaceholderData: false, isPreviousData: false,