Merge branch 'master' of https://github.com/tannerlinsley/react-query into docs/fix

Author: Adebiyi Adedotun

docs/src/pages/guides/default-query-function.md

@@ -7,6 +7,7 @@ If you find yourself wishing for whatever reason that you could just share the s
 
 ```js
 // Define a default query function that will receive the query key
+// the queryKey is guaranteed to be an Array here
 const defaultQueryFn = async ({ queryKey }) => {
   const { data } = await axios.get(`https://jsonplaceholder.typicode.com${queryKey[0]}`);
   return data;

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 of 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.

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/reference/useInfiniteQuery.md

@@ -27,9 +27,9 @@ The options for `useInfiniteQuery` are identical to the [`useQuery` hook](/refer
   - **Required, but only if no default query function has been defined** [`defaultQueryFn`](/guides/default-query-function)
   - The function that the query will use to request data.
   - Receives a `QueryFunctionContext` object with the following variables:
-    - `queryKey: QueryKey`
+    - `queryKey: EnsuredQueryKey`: the queryKey, guaranteed to be an Array
     - `pageParam: unknown | undefined`
-  - Must return a promise that will either resolves data or throws an error.
+  - Must return a promise that will either resolve data or throw an error.
   - Make sure you return the data *and* the `pageParam` if needed for use in the props below.
 - `getNextPageParam: (lastPage, allPages) => unknown | undefined`
   - When new data is received for this query, this function receives both the last page of the infinite list of data and the full array of all pages.

docs/src/pages/reference/useQuery.md

@@ -73,8 +73,8 @@ const result = useQuery({
   - **Required, but only if no default query function has been defined** See [Default Query Function](../guides/default-query-function) for more information.
   - The function that the query will use to request data.
   - Receives a `QueryFunctionContext` object with the following variables:
-    - `queryKey: QueryKey`
-  - Must return a promise that will either resolves data or throws an error.
+    - `queryKey: EnsuredQueryKey`: the queryKey, guaranteed to be an Array
+  - Must return a promise that will either resolve data or throw an error.
 - `enabled: boolean`
   - Set this to `false` to disable this query from automatically running.
   - Can be used for [Dependent Queries](../guides/dependent-queries).

package.json

@@ -22,9 +22,10 @@
   ],
   "scripts": {
     "test": "is-ci \"test:ci\" \"test:dev\"",
-    "test:dev": "npm run test:types && npm run test:eslint && jest --watch",
-    "test:ci": "npm run test:types && npm run test:eslint && jest",
+    "test:dev": "npm run test:types && npm run test:format && npm run test:eslint && jest --watch",
+    "test:ci": "npm run test:types && npm run test:format && npm run test:eslint && jest",
     "test:coverage": "yarn test:ci; open coverage/lcov-report/index.html",
+    "test:format": "yarn prettier --check",
     "test:types": "tsc",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
     "build": "yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:types",
@@ -38,8 +39,9 @@
     "watch:umd": "rimraf ./dist && cross-env NODE_ENV=production rollup -w -c && rollup-plugin-visualizer stats-react.json",
     "watch:types": "rimraf ./types && tsc --watch --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent",
     "now-build": "yarn && cd www && yarn && yarn build",
+    "prettier": "prettier \"{.,src,src/**,example/src,example/src/**,types}/*.{md,js,jsx,ts,tsx,json}\"",
     "start": "yarn watch",
-    "format": "prettier {.,src,src/**,example/src,example/src/**,types}/*.{md,js,jsx,tsx,json} --write",
+    "format": "yarn prettier --write",
     "stats": "open ./stats.html"
   },
   "files": [
@@ -108,7 +110,7 @@
     "eslint-plugin-standard": "^4.0.1",
     "is-ci-cli": "^2.1.1",
     "jest": "^26.0.1",
-    "prettier": "^2.0.5",
+    "prettier": "2.2.1",
     "react": "^16.13.0",
     "react-dom": "^16.13.1",
     "react-error-boundary": "^2.2.2",

src/core/focusManager.ts

@@ -17,7 +17,7 @@ class FocusManager extends Subscribable {
     if (this.removeEventListener) {
       this.removeEventListener()
     }
-    this.removeEventListener = setup((focused) => {
+    this.removeEventListener = setup(focused => {
       if (typeof focused === 'boolean') {
         this.setFocused(focused)
       } else {

src/core/mutationCache.ts

@@ -76,12 +76,7 @@ export class MutationCache extends Subscribable<MutationCacheListener> {
     return this.mutations
   }
 
-  find<
-    TData = unknown,
-    TError = unknown,
-    TVariables = any,
-    TContext = unknown
-  >(
+  find<TData = unknown, TError = unknown, TVariables = any, TContext = unknown>(
     filters: MutationFilters
   ): Mutation<TData, TError, TVariables, TContext> | undefined {
     if (typeof filters.exact === 'undefined') {

src/core/query.ts

@@ -5,13 +5,15 @@ import {
   noop,
   replaceEqualDeep,
   timeUntilStale,
+  ensureQueryKeyArray,
 } from './utils'
 import type {
   InitialDataFunction,
   QueryKey,
   QueryOptions,
   QueryStatus,
   QueryFunctionContext,
+  EnsuredQueryKey,
 } from './types'
 import type { QueryCache } from './queryCache'
 import type { QueryObserver } from './queryObserver'
@@ -58,8 +60,8 @@ export interface FetchContext<
 > {
   fetchFn: () => unknown | Promise<unknown>
   fetchOptions?: FetchOptions
-  options: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
-  queryKey: TQueryKey
+  options: QueryOptions<TQueryFnData, TError, TData, any>
+  queryKey: EnsuredQueryKey<TQueryKey>
   state: QueryState<TData, TError>
 }
 
@@ -380,9 +382,11 @@ export class Query<
       }
     }
 
+    const queryKey = ensureQueryKeyArray(this.queryKey)
+
     // Create query function context
     const queryFnContext: QueryFunctionContext<TQueryKey> = {
-      queryKey: this.queryKey,
+      queryKey,
       pageParam: undefined,
     }
 
@@ -393,10 +397,10 @@ export class Query<
         : Promise.reject('Missing queryFn')
 
     // Trigger behavior hook
-    const context: FetchContext<TQueryFnData, TError, TData, any> = {
+    const context: FetchContext<TQueryFnData, TError, TData, TQueryKey> = {
       fetchOptions,
       options: this.options,
-      queryKey: this.queryKey,
+      queryKey: queryKey,
       state: this.state,
       fetchFn,
     }

src/core/queryClient.ts

@@ -252,19 +252,39 @@ export class QueryClient {
     return promise
   }
 
-  fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+  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, TQueryKey extends QueryKey = QueryKey>(
+  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, TQueryKey extends QueryKey = QueryKey>(
+  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, TQueryKey extends QueryKey = QueryKey>(
+  fetchQuery<
+    TQueryFnData,
+    TError,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey
+  >(
     arg1: TQueryKey | FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
     arg2?:
       | QueryFunction<TQueryFnData, TQueryKey>
@@ -286,21 +306,43 @@ export class QueryClient {
       : Promise.resolve(query.state.data as TData)
   }
 
-  prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+  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, TQueryKey extends QueryKey = QueryKey>(
+  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, TQueryKey extends QueryKey = QueryKey>(
+  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, TQueryKey extends QueryKey = QueryKey>(
+  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>,
+    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)
@@ -335,8 +377,15 @@ export class QueryClient {
     queryFn: QueryFunction<TQueryFnData, TQueryKey>,
     options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<InfiniteData<TData>>
-  fetchInfiniteQuery<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
-    arg1: TQueryKey | FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  fetchInfiniteQuery<
+    TQueryFnData,
+    TError,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey
+  >(
+    arg1:
+      | TQueryKey
+      | FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
     arg2?:
       | QueryFunction<TQueryFnData, TQueryKey>
       | FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
@@ -356,15 +405,15 @@ export class QueryClient {
     TError = unknown,
     TData = TQueryFnData,
     TQueryKey extends QueryKey = QueryKey
-    >(
+  >(
     options: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<void>
   prefetchInfiniteQuery<
     TQueryFnData = unknown,
     TError = unknown,
     TData = TQueryFnData,
     TQueryKey extends QueryKey = QueryKey
-    >(
+  >(
     queryKey: TQueryKey,
     options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
   ): Promise<void>
@@ -373,13 +422,20 @@ export class QueryClient {
     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>,
+  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>,