Merge branch 'master' into feature/1824-transform-placeholder-data-with-select

Author: TkDodo

.eslintrc

@@ -29,7 +29,7 @@
     ],
     "no-shadow": "error",
     "import/no-cycle": "error",
-    "import/no-unresolved": "error",
+    "import/no-unresolved": ["error", { "ignore": ["react-query"] }],
     "import/no-unused-modules": ["off", { "unusedExports": true }],
     "no-redeclare": "off"
   }

.github/workflows/test-and-publish.yml

@@ -16,10 +16,10 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [10, 12, 14]
+        node: [10, 12, 14, 16]
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
       - name: Install dependencies
@@ -34,7 +34,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: 14
           registry-url: https://registry.npmjs.org/

docs/src/pages/guides/filters.md

@@ -13,13 +13,13 @@ A query filter is an object with certain conditions to match a query with:
 // Cancel all queries
 await queryClient.cancelQueries()
 
-// Remove all inactive queries
+// Remove all inactive queries that begin with `posts` in the key
 queryClient.removeQueries('posts', { inactive: true })
 
 // Refetch all active queries
 await queryClient.refetchQueries({ active: true })
 
-// Refetch all active queries that begin with `post` in the key
+// Refetch all active queries that begin with `posts` in the key
 await queryClient.refetchQueries('posts', { active: true })
 ```
 

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

@@ -48,6 +48,8 @@ const queryClient = new QueryClient()
 
 Default options for queries and mutations can now be specified in `QueryClient`:
 
+**Notice that it's now defaultOptions instead of defaultConfig**
+
 ```js
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -147,7 +149,7 @@ They were previously added as the last query key parameter in your query functio
 useInfiniteQuery(['posts'], (_key, pageParam = 0) => fetchPosts(pageParam))
 
 // New
-useInfiniteQuery(['posts'], ({ pageParam = 0 }) => fetchPost(pageParam))
+useInfiniteQuery(['posts'], ({ pageParam = 0 }) => fetchPosts(pageParam))
 ```
 
 ### usePaginatedQuery() has been deprecated in favor of the `keepPreviousData` option

docs/src/pages/guides/mutations.md

@@ -44,7 +44,7 @@ A mutation can only be in one of the following states at any given moment:
 - `isError` or `status === 'error'` - The mutation encountered an error
 - `isSuccess` or `status === 'success'` - The mutation was successful and mutation data is available
 
-Beyond those primary state, more information is available depending on the state the mutation:
+Beyond those primary states, more information is available depending on the state of the mutation:
 
 - `error` - If the mutation is in an `isError` state, the error is available via the `error` property.
 - `data` - If the mutation is in a `success` state, the data is available via the `data` property.
@@ -53,10 +53,10 @@ In the example above, you also saw that you can pass variables to your mutations
 
 Even with just variables, mutations aren't all that special, but when used with the `onSuccess` option, the [Query Client's `invalidateQueries` method](../reference/QueryClient#queryclientinvalidatequeries) and the [Query Client's `setQueryData` method](../reference/QueryClient#queryclientsetquerydata), mutations become a very powerful tool.
 
-> IMPORTANT: The `mutate` function is an asynchronous function, which means you cannot use it directly 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).
+> IMPORTANT: The `mutate` function is an asynchronous function, which means you cannot use it directly in an event callback in **React 16 and earlier**. 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/legacy-event-pooling.html).
 
 ```js
-// This will not work
+// This will not work in React 16 and earlier
 const CreateTodo = () => {
   const mutation = useMutation(event => {
     event.preventDefault()

docs/src/pages/guides/placeholder-query-data.md

@@ -43,7 +43,7 @@ In some circumstances, you may be able to provide the placeholder data for a que
 
 ```js
 function Todo({ blogPostId }) {
-  const result = useQuery(['blogPost', blogPostId], () => fetch('/blogPosts'), {
+  const result = useQuery(['blogPost', blogPostId], () => fetch(`/blogPosts/${blogPostId}`), {
     placeholderData: () => {
       // Use the smaller/preview version of the blogPost from the 'blogPosts' query as the placeholder data for this blogPost query
       return queryClient

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

@@ -9,7 +9,9 @@ When dealing with mutations that **update** objects on the server, it's common f
 const queryClient = useQueryClient()
 
 const mutation = useMutation(editTodo, {
-  onSuccess: data => queryClient.setQueryData(['todo', { id: 5 }], data),
+  onSuccess: data => {
+    queryClient.setQueryData(['todo', { id: 5 }], data)
+  }
 })
 
 mutation.mutate({

docs/src/pages/overview.md

@@ -20,7 +20,7 @@ Once you grasp the nature of server state in your application, **even more chall
 
 - Caching... (possibly the hardest thing to do in programming)
 - Deduping multiple requests for the same data into a single request
-- Updating out of date data in the background
+- Updating "out of date" data in the background
 - Knowing when data is "out of date"
 - Reflecting updates to data as quickly as possible
 - Performance optimizations like pagination and lazy loading data

docs/src/pages/plugins/persistQueryClient.md

@@ -94,6 +94,10 @@ interface PersistQueryClientOptions {
   /** A unique string that can be used to forcefully
    * invalidate existing caches if they do not share the same buster string */
   buster?: string
+  /** The options passed to the hydrate function */
+  hydrateOptions?: HydrateOptions
+  /** The options passed to the dehydrate function */
+  dehydrateOptions?: DehydrateOptions
 }
 ```
 

docs/src/pages/reference/useMutation.md

@@ -46,15 +46,15 @@ mutate(variables, {
   - This function will fire before the mutation function is fired and is passed the same variables the mutation function would receive
   - Useful to perform optimistic updates to a resource in hopes that the mutation succeeds
   - The value returned from this function will be passed to both the `onError` and `onSettled` functions in the event of a mutation failure and can be useful for rolling back optimistic updates.
-- `onSuccess: (data: TData, variables: TVariables, context?: TContext) => Promise<void> | void`
+- `onSuccess: (data: TData, variables: TVariables, context?: TContext) => Promise<unknown> | void`
   - Optional
   - This function will fire when the mutation is successful and will be passed the mutation's result.
   - If a promise is returned, it will be awaited and resolved before proceeding
-- `onError: (err: TError, variables: TVariables, context?: TContext) => Promise<void> | void`
+- `onError: (err: TError, variables: TVariables, context?: TContext) => Promise<unknown> | void`
   - Optional
   - This function will fire if the mutation encounters an error and will be passed the error.
   - If a promise is returned, it will be awaited and resolved before proceeding
-- `onSettled: (data: TData, error: TError, variables: TVariables, context?: TContext) => Promise<void> | void`
+- `onSettled: (data: TData, error: TError, variables: TVariables, context?: TContext) => Promise<unknown> | void`
   - Optional
   - This function will fire when the mutation is either successfully fetched or encounters an error and be passed either the data or error
   - If a promise is returned, it will be awaited and resolved before proceeding