Merge pull request #3 from tannerlinsley/master

update

Author: TkDodo

docs/src/components/markdown.module.css

@@ -156,6 +156,12 @@
   @apply text-xl;
 }
 
+.markdown > h2 > a,
+.markdown > h3 > a,
+.markdown > h4 > a {
+  @apply underline;
+}
+
 .markdown > .markdown ul {
   @apply list-disc;
 }

docs/src/pages/guides/infinite-queries.md

@@ -160,8 +160,8 @@ Manually removing a single value from an individual page:
 ```js
 const newPagesArray = []
 oldPagesArray?.pages.forEach(page => {
-  const newData = page.data.filter(val => val.id !== updatedId)
-  newPagesArray.push({ data: newData, pageParam: page.pageParam })
+  const newData = page.filter(val => val.id !== updatedId)
+  newPagesArray.push(newData)
 })
 queryClient.setQueryData('projects', data => ({
   pages: newPagesArray,

docs/src/pages/guides/migrating-to-react-query-3.md

@@ -416,6 +416,37 @@ setConsole({
 
 In version 3 **this is done automatically when React Query is used in React Native**.
 
+
+### Typescript
+#### `QueryStatus` has been changed from an [enum](https://www.typescriptlang.org/docs/handbook/enums.html#string-enums) to a [union type](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types)
+
+So, if you were checking the status property of a query or mutation against a QueryStatus enum property you will have to check it now against the string literal the enum previously held for each property.
+
+Therefore you have to change the enum properties to their equivalent string literal, like this:
+- `QueryStatus.Idle` -> `'idle'`
+- `QueryStatus.Loading` -> `'loading'`
+- `QueryStatus.Error` -> `'error'`
+- `QueryStatus.Success` -> `'success'`
+
+Here is an example of the changes you would have to make:
+
+```diff
+- import { useQuery, QueryStatus } from 'react-query';
++ import { useQuery } from 'react-query';
+
+const { data, status } = useQuery(['post', id], () => fetchPost(id))
+
+- if (status === QueryStatus.Loading) {
++ if (status === 'loading') {
+  ...
+}
+
+- if (status === QueryStatus.Error) {
++ if (status === 'error') {
+  ...
+}
+```
+
 ## New features
 
 #### Query Data Selectors

docs/src/pages/guides/paginated-queries.md

@@ -13,7 +13,7 @@ However, if you run this simple example, you might notice something strange:
 
 **The UI jumps in and out of the `success` and `loading` states because each new page is treated like a brand new query.**
 
-This experience is not optimal and unfortunately is how many tools today insist on working. But not React Query! As you may have guessed, React Query comes with an awesome featured called `keepPreviousData` that allows us to get around this.
+This experience is not optimal and unfortunately is how many tools today insist on working. But not React Query! As you may have guessed, React Query comes with an awesome feature called `keepPreviousData` that allows us to get around this.
 
 ## Better Paginated Queries with `keepPreviousData`
 

docs/src/pages/guides/updates-from-mutation-responses.md

@@ -19,7 +19,7 @@ mutation.mutate({
 
 // The query below will be updated with the response from the
 // successful mutation
-const { status, data, error } = useQuery(['todo', { id: 5 }], fetchTodoByID)
+const { status, data, error } = useQuery(['todo', { id: 5 }], fetchTodoById)
 ```
 
 You might want to tie the `onSuccess` logic into a reusable mutation, for that you can

src/core/queryClient.ts

@@ -252,24 +252,24 @@ export class QueryClient {
     return promise
   }
 
-  fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
-    options: FetchQueryOptions<TQueryFnData, TError, TData>
+  fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+    options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<TData>
-  fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
-    queryKey: QueryKey,
-    options?: FetchQueryOptions<TQueryFnData, TError, TData>
+  fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+    queryKey: TQueryKey,
+    options?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<TData>
-  fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
-    queryKey: QueryKey,
-    queryFn: QueryFunction<TQueryFnData>,
-    options?: FetchQueryOptions<TQueryFnData, TError, TData>
+  fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+    queryKey: TQueryKey,
+    queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+    options?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<TData>
-  fetchQuery<TQueryFnData, TError, TData = TQueryFnData>(
-    arg1: QueryKey | FetchQueryOptions<TQueryFnData, TError, TData>,
+  fetchQuery<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+    arg1: TQueryKey | FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
     arg2?:
-      | QueryFunction<TQueryFnData>
-      | FetchQueryOptions<TQueryFnData, TError, TData>,
-    arg3?: FetchQueryOptions<TQueryFnData, TError, TData>
+      | QueryFunction<TQueryFnData, TQueryKey>
+      | FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    arg3?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<TData> {
     const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
     const defaultedOptions = this.defaultQueryOptions(parsedOptions)
@@ -286,22 +286,22 @@ export class QueryClient {
       : Promise.resolve(query.state.data as TData)
   }
 
-  prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
-    options: FetchQueryOptions<TQueryFnData, TError, TData>
+  prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+    options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<void>
-  prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
-    queryKey: QueryKey,
-    options?: FetchQueryOptions<TQueryFnData, TError, TData>
+  prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+    queryKey: TQueryKey,
+    options?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<void>
-  prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
-    queryKey: QueryKey,
-    queryFn: QueryFunction,
-    options?: FetchQueryOptions<TQueryFnData, TError, TData>
+  prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+    queryKey: TQueryKey,
+    queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+    options?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<void>
-  prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
-    arg1: QueryKey | FetchQueryOptions<TQueryFnData, TError, TData>,
-    arg2?: QueryFunction | FetchQueryOptions<TQueryFnData, TError, TData>,
-    arg3?: FetchQueryOptions<TQueryFnData, TError, TData>
+  prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+    arg1: TQueryKey | FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    arg2?: QueryFunction<TQueryFnData, TQueryKey> | FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    arg3?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<void> {
     return this.fetchQuery(arg1 as any, arg2 as any, arg3)
       .then(noop)
@@ -311,33 +311,36 @@ export class QueryClient {
   fetchInfiniteQuery<
     TQueryFnData = unknown,
     TError = unknown,
-    TData = TQueryFnData
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey
   >(
-    options: FetchInfiniteQueryOptions<TQueryFnData, TError, TData>
+    options: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<InfiniteData<TData>>
   fetchInfiniteQuery<
     TQueryFnData = unknown,
     TError = unknown,
-    TData = TQueryFnData
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey
   >(
-    queryKey: QueryKey,
-    options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData>
+    queryKey: TQueryKey,
+    options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<InfiniteData<TData>>
   fetchInfiniteQuery<
     TQueryFnData = unknown,
     TError = unknown,
-    TData = TQueryFnData
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey
   >(
-    queryKey: QueryKey,
-    queryFn: QueryFunction<TQueryFnData>,
-    options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData>
+    queryKey: TQueryKey,
+    queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+    options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<InfiniteData<TData>>
-  fetchInfiniteQuery<TQueryFnData, TError, TData = TQueryFnData>(
-    arg1: QueryKey | FetchInfiniteQueryOptions<TQueryFnData, TError, TData>,
+  fetchInfiniteQuery<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+    arg1: TQueryKey | FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
     arg2?:
-      | QueryFunction<TQueryFnData>
-      | FetchInfiniteQueryOptions<TQueryFnData, TError, TData>,
-    arg3?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData>
+      | QueryFunction<TQueryFnData, TQueryKey>
+      | FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    arg3?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<InfiniteData<TData>> {
     const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
     parsedOptions.behavior = infiniteQueryBehavior<
@@ -348,20 +351,39 @@ export class QueryClient {
     return this.fetchQuery(parsedOptions)
   }
 
-  prefetchInfiniteQuery(options: FetchInfiniteQueryOptions): Promise<void>
-  prefetchInfiniteQuery(
-    queryKey: QueryKey,
-    options?: FetchInfiniteQueryOptions
+  prefetchInfiniteQuery<
+    TQueryFnData = unknown,
+    TError = unknown,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey
+    >(
+    options: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<void>
-  prefetchInfiniteQuery(
-    queryKey: QueryKey,
-    queryFn: QueryFunction,
-    options?: FetchInfiniteQueryOptions
+  prefetchInfiniteQuery<
+    TQueryFnData = unknown,
+    TError = unknown,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey
+    >(
+    queryKey: TQueryKey,
+    options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<void>
-  prefetchInfiniteQuery(
-    arg1: QueryKey | FetchInfiniteQueryOptions,
-    arg2?: QueryFunction | FetchInfiniteQueryOptions,
-    arg3?: FetchInfiniteQueryOptions
+  prefetchInfiniteQuery<
+    TQueryFnData = unknown,
+    TError = unknown,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey
+    >(
+    queryKey: TQueryKey,
+    queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+    options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+  ): Promise<void>
+  prefetchInfiniteQuery<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+    arg1: TQueryKey | FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    arg2?:
+      | QueryFunction<TQueryFnData, TQueryKey>
+      | FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    arg3?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<void> {
     return this.fetchInfiniteQuery(arg1 as any, arg2 as any, arg3)
       .then(noop)

src/core/tests/queryClient.test.tsx

@@ -1,5 +1,5 @@
 import { sleep, queryKey, mockConsoleError } from '../../react/tests/utils'
-import { QueryCache, QueryClient, QueryObserver } from '../..'
+import { QueryCache, QueryClient, QueryFunction, QueryObserver } from '../..'
 
 describe('queryClient', () => {
   let queryClient: QueryClient
@@ -186,6 +186,23 @@ describe('queryClient', () => {
   })
 
   describe('fetchQuery', () => {
+    test('should not type-error with strict query key', async () => {
+      type StrictData = 'data'
+      type StrictQueryKey = ['strict', string]
+      const key: StrictQueryKey = ['strict', queryKey()]
+
+      const fetchFn: QueryFunction<StrictData, StrictQueryKey> = () => (
+        Promise.resolve('data')
+      )
+
+      await expect(
+        queryClient.fetchQuery<StrictData, any, StrictData, StrictQueryKey>(
+          key,
+          fetchFn,
+        )
+      ).resolves.toEqual('data')
+    })
+
     // https://github.com/tannerlinsley/react-query/issues/652
     test('should not retry by default', async () => {
       const consoleMock = mockConsoleError()
@@ -282,6 +299,28 @@ describe('queryClient', () => {
   })
 
   describe('fetchInfiniteQuery', () => {
+    test('should not type-error with strict query key', async () => {
+      type StrictData = string
+      type StrictQueryKey = ['strict', string]
+      const key: StrictQueryKey = ['strict', queryKey()]
+
+      const data = {
+        pages: ['data'],
+        pageParams: [undefined],
+      }
+
+      const fetchFn: QueryFunction<StrictData, StrictQueryKey> = () => (
+        Promise.resolve(data.pages[0])
+      )
+
+      await expect(
+        queryClient.fetchInfiniteQuery<StrictData, any, StrictData, StrictQueryKey>(
+          key,
+          fetchFn,
+        )
+      ).resolves.toEqual(data)
+    })
+
     test('should return infinite query data', async () => {
       const key = queryKey()
       const result = await queryClient.fetchInfiniteQuery(
@@ -301,6 +340,25 @@ describe('queryClient', () => {
   })
 
   describe('prefetchInfiniteQuery', () => {
+    test('should not type-error with strict query key', async () => {
+      type StrictData = 'data'
+      type StrictQueryKey = ['strict', string]
+      const key: StrictQueryKey = ['strict', queryKey()]
+
+      const fetchFn: QueryFunction<StrictData, StrictQueryKey> = () => (
+        Promise.resolve('data')
+      )
+
+      await queryClient.prefetchInfiniteQuery<StrictData, any, StrictData, StrictQueryKey>(key, fetchFn)
+
+      const result = queryClient.getQueryData(key)
+
+      expect(result).toEqual({
+        pages: ['data'],
+        pageParams: [undefined],
+      })
+    })
+
     test('should return infinite query data', async () => {
       const key = queryKey()
 
@@ -318,6 +376,22 @@ describe('queryClient', () => {
   })
 
   describe('prefetchQuery', () => {
+    test('should not type-error with strict query key', async () => {
+      type StrictData = 'data'
+      type StrictQueryKey = ['strict', string]
+      const key: StrictQueryKey = ['strict', queryKey()]
+
+      const fetchFn: QueryFunction<StrictData, StrictQueryKey> = () => (
+        Promise.resolve('data')
+      )
+
+      await queryClient.prefetchQuery<StrictData, any, StrictData, StrictQueryKey>(key, fetchFn);
+
+      const result = queryClient.getQueryData(key);
+
+      expect(result).toEqual('data')
+    })
+
     test('should return undefined when an error is thrown', async () => {
       const consoleMock = mockConsoleError()
 

src/core/tests/queryObserver.test.tsx

@@ -241,6 +241,7 @@ describe('queryObserver', () => {
   })
 
   test('should always run the selector again if selector throws an error', async () => {
+    const consoleMock = mockConsoleError()
     const key = queryKey()
     const results: QueryObserverResult[] = []
     const select = () => {
@@ -284,6 +285,7 @@ describe('queryObserver', () => {
       isFetching: false,
       data: undefined,
     })
+    consoleMock.mockRestore()
   })
 
   test('should structurally share the selector', async () => {