Repository: tannerlinsley/react-query
Pull request #660 (2020-06-29 14:13:12)

docs: minor fixes


Patch:
diff --git a/README.md b/README.md
index 0ff0343d9..a821f6b9c 100644
--- a/README.md
+++ b/README.md
@@ -525,7 +525,7 @@ import { useQuery } from 'react-query'
 
 useQuery({
   queryKey: ['todo', 7],
-  queryFn: fetchTodos,
+  queryFn: fetchTodo,
   config: {},
 })
 ```
@@ -553,7 +553,8 @@ const { isIdle, data: projects } = useQuery(
   }
 )
 
-// isIdle will be `true` until `enabled` is true and the query begins to fetch. It will then go to the `isLoading` stage and hopefully the `isSuccess` stage :)
+// isIdle will be `true` until `enabled` is true and the query begins to fetch.
+// It will then go to the `isLoading` stage and hopefully the `isSuccess` stage :)
 ```
 
 ## Caching & Invalidation
@@ -668,7 +669,7 @@ When using `useInfiniteQuery`, you'll notice a few things are different:
 
 ### Example
 
-Let's assume we have an API that returns pages of `projects` 3 at a time based on a `cursor` index along with a cursor that can be used to fetch the next group of projects
+Let's assume we have an API that returns pages of `projects` 3 at a time based on a `cursor` index along with a cursor that can be used to fetch the next group of projects:
 
 ```js
 fetch('/api/projects?cursor=0')
@@ -769,7 +770,7 @@ function Projects() {
 
 ### What if I want to infinitely load more data in reverse?
 
-Sometimes you may not want to **append** infintely loaded data, but instead **prepend** it. If this is case, you can use `fetchMore`'s `previous` option, eg.
+Sometimes you may not want to **append** infinitely loaded data, but instead **prepend** it. If this is case, you can use `fetchMore`'s `previous` option, eg.
 
 ```js
 fetchMore(previousPageVariables, { previous: true })
@@ -788,7 +789,7 @@ If you ever want to disable a query from automatically running, you can use the
 When `enabled` is `false`:
 
 - If the query has cached data
-  - The query will initialized in the `status === 'success'` or`isSuccess === true` state.
+  - The query will be initialized in the `status === 'success'` or `isSuccess === true` state.
 - If the query does not have cached data
   - The query will start in the `status === 'idle'` or `isIdle === true` state.
 - The query will not automatically fetch on mount.
@@ -847,7 +848,7 @@ You can configure retries both on a global level and an individual query level.
 ```js
 import { useQuery } from 'react-query'
 
-// Make specific query retry a certain number of times
+// Make a specific query retry a certain number of times
 const queryInfo = useQuery(['todos', 1], fetchTodoListPage, {
   retry: 10, // Will retry failed requests 10 times before displaying an error
 })
@@ -998,7 +999,8 @@ function Todos() {
 }
 ```
 
-> NOTE: Similar to `initialData`, `initialStale` can also be a function for costly calculations, eg. `initialStale: () => isPreview(todoListPreview)`,
+> NOTE: Similar to `initialData`, `initialStale` can also be a function for costly calculations.  
+> eg. `initialStale: () => isPreview(todoListPreview)`
 
 ## SSR & Initial Data
 
@@ -1267,7 +1269,7 @@ const CreateTodo = () => {
 }
 ```
 
-Even with just variables, mutations aren't all that special, but when used with the `onSuccess` option, the [Query Cache's `invalidateQueries` method](#querycacherefetchqueries) and the [Query Cache's `setQueryData` method](#querycachesetquerydata), mutations become a very powerful tool.
+Even with just variables, mutations aren't all that special, but when used with the `onSuccess` option, the [Query Cache's `invalidateQueries` method](#querycacheinvalidatequeries) and the [Query Cache's `setQueryData` method](#querycachesetquerydata), mutations become a very powerful tool.
 
 Note that since version 1.1.0, the `mutate` function is no longer called synchronously so you cannot use it in an event callback. If you need to access the event in `onSubmit` you need to wrap `mutate` in another function. This is due to [React event pooling](https://reactjs.org/docs/events.html#event-pooling).
 
@@ -2128,7 +2130,7 @@ setQueryData(queryKey, oldData => newData)
 
 The `invalidateQueries` method can be used to invalidate and refetch single or multiple queries in the cache based on their query keys or any other functionally accessible property/state of the query. By default, all matching queries are immediately marked as stale and active queries are refetched in the background.
 
-- If you **no not want active queries to refetch**, and simply be marked as stale, you can use the `refetchActive: false` option.
+- If you **do not want active queries to refetch**, and simply be marked as stale, you can use the `refetchActive: false` option.
 - If you **want inactive queries to refetch** as well, use the `refetchInactive: true` option
 
 ```js
diff --git a/types/index.d.ts b/types/index.d.ts
index 8d807f757..88cba4b62 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -217,7 +217,7 @@ export interface BaseSharedOptions {
   suspense: boolean
 }
 
-export interface BaseQueryOptions<TError = Error> {
+export interface BaseQueryOptions<TResult = unknown, TError = Error> {
   /**
    * Set this to `false` to disable automatic refetching when the query mounts or changes query keys.
    * To refetch the query, use the `refetch` method returned from the `useQuery` instance.
@@ -237,18 +237,16 @@ export interface BaseQueryOptions<TError = Error> {
   refetchIntervalInBackground?: boolean
   refetchOnWindowFocus?: boolean
   refetchOnMount?: boolean
-  onSuccess?: (data: any) => void
+  onSuccess?: (data: TResult) => void
   onError?: (err: TError) => void
-  onSettled?: (data: any, error: TError | null) => void
+  onSettled?: (data: TResult | undefined, error: TError | null) => void
   isDataEqual?: (oldData: unknown, newData: unknown) => boolean
   useErrorBoundary?: boolean
 }
 
 export interface QueryOptions<TResult, TError = Error>
-  extends BaseQueryOptions<TError> {
+  extends BaseQueryOptions<TResult, TError> {
   suspense?: boolean
-  onSuccess?: (data: TResult) => void
-  onSettled?: (data: TResult | undefined, error: TError | null) => void
   initialData?: TResult | (() => TResult | undefined)
   initialStale?: boolean | (() => boolean | undefined)
 }
@@ -387,37 +385,57 @@ export interface InfiniteQueryResult<TResult, TMoreVariable, TError = Error>
   ) => Promise<TResult[]> | undefined
 }
 
-export function useMutation<TResults, TVariables = undefined, TError = Error>(
-  mutationFn: MutationFunction<TResults, TVariables, TError>,
-  mutationOptions?: MutationOptions<TResults, TVariables, TError>
+export function useMutation<
+  TResult,
+  TVariables = undefined,
+  TError = Error,
+  TSnapshot = unknown
+>(
+  mutationFn: MutationFunction<TResult, TVariables, TError, TSnapshot>,
+  mutationOptions?: MutationOptions<TResult, TVariables, TError, TSnapshot>
 ): [
-  MutateFunction<TResults, TVariables, TError>,
-  MutationResult<TResults, TError>
+  MutateFunction<TResult, TVariables, TError>,
+  MutationResult<TResult, TError>
 ]
 
-export type MutationFunction<TResults, TVariables, TError = Error> = (
+export type MutationFunction<
+  TResult,
+  TVariables,
+  TError = Error,
+  TSnapshot = unknown
+> = (
   variables: TVariables,
-  mutateOptions?: MutateOptions<TResults, TVariables, TError>
-) => Promise<TResults>
+  mutateOptions?: MutateOptions<TResult, TVariables, TError, TSnapshot>
+) => Promise<TResult>
 
-export interface MutateOptions<TResult, TVariables, TError = Error> {
+export interface MutateOptions<
+  TResult,
+  TVariables,
+  TError = Error,
+  TSnapshot = unknown
+> {
   onSuccess?: (data: TResult, variables: TVariables) => Promise<void> | void
   onError?: (
     error: TError,
-    snapshotValue: unknown,
-    onMutateValue: (variable: TVariables) => Promise<unknown> | unknown
+    variables: TVariables,
+    snapshotValue: TSnapshot
   ) => Promise<void> | void
   onSettled?: (
     data: undefined | TResult,
     error: TError | null,
-    snapshotValue?: unknown
+    variables: TVariables,
+    snapshotValue?: TSnapshot
   ) => Promise<void> | void
   throwOnError?: boolean
 }
 
-export interface MutationOptions<TResult, TVariables, TError = Error>
-  extends MutateOptions<TResult, TVariables, TError> {
-  onMutate?: (variables: TVariables) => Promise<unknown> | unknown
+export interface MutationOptions<
+  TResult,
+  TVariables,
+  TError = Error,
+  TSnapshot = unknown
+> extends MutateOptions<TResult, TVariables, TError, TSnapshot> {
+  onMutate?: (variables: TVariables) => Promise<TSnapshot> | TSnapshot
   useErrorBoundary?: boolean
 }
 
@@ -562,7 +580,7 @@ export interface QueryCache {
   }): Promise<TResult>
 
   getQueryData<T = unknown>(key: AnyQueryKey | string): T | undefined
-  setQueryData<TResult, TError>(
+  setQueryData<TResult, TError = Error>(
     key: AnyQueryKey | string,
     dataOrUpdater:
       | TResult
@@ -605,7 +623,7 @@ export interface QueryCache {
   ): void
   isFetching: number
   subscribe(callback: (queryCache: QueryCache) => void): () => void
-  clear(): void,
+  clear(): void
   resetErrorBoundaries: () => void
 }
 
@@ -655,18 +673,7 @@ export interface ReactQueryProviderConfig<TError = Error> {
     ) => [string, QueryKeyPart[]] | []
   }
   shared?: BaseSharedOptions
-  mutations?: {
-    throwOnError?: boolean
-    useErrorBoundary?: boolean
-    onMutate?: (variables: unknown) => Promise<unknown> | unknown
-    onSuccess?: (data: unknown, variables?: unknown) => void
-    onError?: (err: TError, snapshotValue?: unknown) => void
-    onSettled?: (
-      data: unknown | undefined,
-      error: TError | null,
-      snapshotValue?: unknown
-    ) => void
-  }
+  mutations?: MutationOptions<unknown, unknown, TError>
 }
 
 export type ConsoleFunction = (...args: any[]) => void


Test patch:
diff --git a/types/test.ts b/types/test.ts
index 36e889e8e..b870829ea 100644
--- a/types/test.ts
+++ b/types/test.ts
@@ -448,9 +448,14 @@ function globalConfig() {
       useErrorBoundary: true,
       onMutate: (variables: unknown) => Promise.resolve(),
       onSuccess: (data: unknown, variables: unknown) => undefined,
-      onError: (err: Error, snapshotValue: unknown) => undefined,
-      onSettled: (data: unknown, error: Error | null, snapshotValue?: any) =>
+      onError: (err: Error, variables: unknown, snapshotValue: unknown) =>
         undefined,
+      onSettled: (
+        data: unknown,
+        error: Error | null,
+        variables: unknown,
+        snapshotValue?: unknown
+      ) => undefined,
     },
   }
 }