Merge remote-tracking branch 'react-query/master' into alpha

Author: TkDodo

docs/src/pages/guides/query-cancellation.md

@@ -99,6 +99,18 @@ const query = useQuery(['todos'], ({ signal }) => {
 
 ## Using `graphql-request`
 
+An `AbortSignal` can be set in the client `request` method.
+
+```js
+const client = new GraphQLClient(endpoint)
+
+const query = useQuery('todos', ({ signal }) => {
+  client.request({ document: query, signal })
+})
+```
+
+## Using `graphql-request`  version less than v4.0.0
+
 An `AbortSignal` can be set in the `GraphQLClient` constructor.
 
 ```js

docs/src/pages/reference/QueryClient.md

@@ -203,7 +203,7 @@ This distinction is more a "convenience" for ts devs that know which structure w
 
 ## `queryClient.setQueryData`
 
-`setQueryData` is a synchronous function that can be used to immediately update a query's cached data. If the query does not exist, it will be created. **If the query is not utilized by a query hook in the default `cacheTime` of 5 minutes, the query will be garbage collected**.
+`setQueryData` is a synchronous function that can be used to immediately update a query's cached data. If the query does not exist, it will be created. **If the query is not utilized by a query hook in the default `cacheTime` of 5 minutes, the query will be garbage collected**. To update multiple queries at once and match query keys partially, you need to use [`queryClient.setQueriesData`](#queryclientsetqueriesdata) instead. 
 
 > The difference between using `setQueryData` and `fetchQuery` is that `setQueryData` is sync and assumes that you already synchronously have the data available. If you need to fetch the data asynchronously, it's suggested that you either refetch the query key or use `fetchQuery` to handle the asynchronous fetch.
 
@@ -248,7 +248,7 @@ console.log(state.dataUpdatedAt)
 
 ## `queryClient.setQueriesData`
 
-`setQueriesData` is a synchronous function that can be used to immediately update cached data of multiple queries. Only queries that match the passed queryKey or queryFilter will be updated - no new cache entries will be created. Under the hood, [`setQueryData`](#queryclientsetquerydata) is called for each query.
+`setQueriesData` is a synchronous function that can be used to immediately update cached data of multiple queries by using filter function or partially matching the query key. Only queries that match the passed queryKey or queryFilter will be updated - no new cache entries will be created. Under the hood, [`setQueryData`](#queryclientsetquerydata) is called for each query.
 
 ```js
 queryClient.setQueriesData(queryKey | filters, updater)
@@ -257,7 +257,7 @@ queryClient.setQueriesData(queryKey | filters, updater)
 **Options**
 
 - `queryKey: QueryKey`: [Query Keys](../guides/query-keys) | `filters: QueryFilters`: [Query Filters](../guides/filters#query-filters)
-  - if a queryKey is passed as first argument, queryKeys fuzzily matching this param will be updated
+  - if a queryKey is passed as first argument, queryKeys partially matching this param will be updated
   - if a filter is passed, queryKeys matching the filter will be updated
 - `updater: TData | (oldData: TData | undefined) => TData`
   - the [setQueryData](#queryclientsetquerydata) updater function or new data, will be called for each matching queryKey

examples/load-more-infinite-scroll/pages/index.js

@@ -48,7 +48,7 @@ function Example() {
   useIntersectionObserver({
     target: loadMoreButtonRef,
     onIntersect: fetchNextPage,
-    enabled: hasNextPage,
+    enabled: !!hasNextPage,
   })
 
   return (

src/reactjs/index.ts

@@ -20,3 +20,4 @@ export * from './types'
 export type { QueryClientProviderProps } from './QueryClientProvider'
 export type { QueryErrorResetBoundaryProps } from './QueryErrorResetBoundary'
 export type { HydrateProps } from './Hydrate'
+export type { QueriesOptions, QueriesResults } from './useQueries'

src/reactjs/tests/useQueries.test.tsx

@@ -19,7 +19,10 @@ import {
   QueryObserverResult,
   QueriesObserver,
   QueryFunction,
+  UseQueryOptions,
+  QueryKey,
 } from '../..'
+import { EnsuredQueryKey, QueryFunctionContext } from '../../core'
 
 describe('useQueries', () => {
   const queryCache = new QueryCache()
@@ -894,7 +897,8 @@ describe('useQueries', () => {
     }
   })
 
-  it('handles types for QueryFunction factory with strongly typed QueryKey', () => {
+  it('handles strongly typed queryFn factories and useQueries wrappers', () => {
+    // QueryKey + queryFn factory
     type QueryKeyA = ['queryA']
     const getQueryKeyA = (): QueryKeyA => ['queryA']
     type GetQueryFunctionA = () => QueryFunction<number, QueryKeyA>
@@ -913,6 +917,32 @@ describe('useQueries', () => {
     type SelectorB = (data: string) => [string, number]
     const getSelectorB = (): SelectorB => data => [data, +data]
 
+    // Wrapper with strongly typed array-parameter
+    function useWrappedQueries<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryKey extends QueryKey
+    >(queries: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]) {
+      return useQueries(
+        queries.map(
+          // no need to type the mapped query
+          query => {
+            const { queryFn: fn, queryKey: key, onError: err } = query
+            expectType<QueryFunction<TQueryFnData, TQueryKey> | undefined>(fn)
+            return {
+              queryKey: key,
+              onError: err,
+              queryFn: (ctx: QueryFunctionContext<TQueryKey>) => {
+                expectType<EnsuredQueryKey<TQueryKey>>(ctx.queryKey)
+                return fn?.call({}, ctx)
+              },
+            }
+          }
+        )
+      )
+    }
+
     // @ts-expect-error (Page component is not rendered)
     // eslint-disable-next-line
     function Page() {
@@ -951,6 +981,18 @@ describe('useQueries', () => {
       expectType<QueryObserverResult<[string, number], unknown>>(
         withSelector[1]
       )
+
+      const withWrappedQueries = useWrappedQueries(
+        Array(10).map(() => ({
+          queryKey: getQueryKeyA(),
+          queryFn: getQueryFunctionA(),
+          select: getSelectorA(),
+        }))
+      )
+
+      expectType<QueryObserverResult<number | undefined, unknown>[]>(
+        withWrappedQueries
+      )
     }
   })
 

src/reactjs/useQueries.ts

@@ -68,7 +68,7 @@ type GetResults<T> =
 /**
  * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
  */
-type QueriesOptions<
+export type QueriesOptions<
   T extends any[],
   Result extends any[] = [],
   Depth extends ReadonlyArray<number> = []
@@ -84,15 +84,20 @@ type QueriesOptions<
   ? T
   : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type!
   // use this to infer the param types in the case of Array.map() argument
-  T extends UseQueryOptions<infer TQueryFnData, infer TError, infer TData>[]
-  ? UseQueryOptions<TQueryFnData, TError, TData>[]
+  T extends UseQueryOptions<
+      infer TQueryFnData,
+      infer TError,
+      infer TData,
+      infer TQueryKey
+    >[]
+  ? UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]
   : // Fallback
     UseQueryOptions[]
 
 /**
  * QueriesResults reducer recursively maps type param to results
  */
-type QueriesResults<
+export type QueriesResults<
   T extends any[],
   Result extends any[] = [],
   Depth extends ReadonlyArray<number> = []
@@ -104,7 +109,12 @@ type QueriesResults<
   ? [...Result, GetResults<Head>]
   : T extends [infer Head, ...infer Tail]
   ? QueriesResults<[...Tail], [...Result, GetResults<Head>], [...Depth, 1]>
-  : T extends UseQueryOptions<infer TQueryFnData, infer TError, infer TData>[]
+  : T extends UseQueryOptions<
+      infer TQueryFnData,
+      infer TError,
+      infer TData,
+      any
+    >[]
   ? // Dynamic-size (homogenous) UseQueryOptions array: map directly to array of results
     UseQueryResult<unknown extends TData ? TQueryFnData : TData, TError>[]
   : // Fallback