Merge branch 'beta' of https://github.com/TanStack/query into beta

Author: tannerlinsley

docs/graphql.md

@@ -13,4 +13,4 @@ You can use [GraphQL-Codegen](https://graphql-code-generator.com/) to generate r
 
 ## Examples
 
-- [basic-graphql-request](../docs/examples/basic-graphql-request) (The "basic" example, but implemented with [`graphql-request`](https://github.com/prisma-labs/graphql-request))
+- [basic-graphql-request](../examples/react/basic-graphql-request) (The "basic" example, but implemented with [`graphql-request`](https://github.com/prisma-labs/graphql-request))

docs/typescript.md

@@ -12,16 +12,73 @@ Things to keep in mind:
 - It is **highly recommended that you lock your react-query package version to a specific patch release and upgrade with the expectation that types may be fixed or upgraded between any release**
 - The non-type-related public API of React Query still follows semver very strictly.
 
-## Defining Custom Hooks
+## Type Inference
 
-When defining a custom hook you need to specify the result and error types, for example:
+Types in React Query generally flow through very well so that you don't have to provide type annotations for yourself
 
 ```ts
-function useGroups() {
-  return useQuery<Group[], Error>('groups', fetchGroups)
+const { data } = useQuery(['test'], () => Promise.resolve(5))
+//      ^? const data: number | undefined
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFC8MQAdqnhIAJnRh0icALwoM2XHgAUAbSqDkIAEa4qAXQA0cFQEo5APjgAFciGAYAdLVQQANgDd0KgKxmzXgB6ILgw8IA9AH5eIA)
+
+```ts
+const { data } = useQuery(['test'], () => Promise.resolve(5), { select: data => data.toString()})
+//      ^? const data: string | undefined
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFC8MQAdqnhIAJnRh0icALwoM2XHgAUAbSox0IqgF0ANHBUBKOQD44ABXIhgGAHS1UEADYA3dCoCsxw0gwu6EwAXHASUuZhknT2MBAAyjBQwIIA5iaExrwA9Nlw+QUAegD8vEA)
+
+This works best if your `queryFn` has a well-defined returned type. Keep in mind that most data fetching libraries return `any` per default, so make sure to extract it to a properly typed function:
+
+```ts
+const fetchGroups = (): Promise<Group[]> => axios.get('/groups').then(response => response.data)
+
+const { data } = useQuery(['groups'], fetchGroups)
+//      ^? const data: Group[] | undefined
+ ```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFCiSw4dAB7AIqUuUpURY1Nx68YeMOjgBxcsjBwAvIjjAAJgC44AO2QgARriK9eDCOdTwS6GAwAWmiNon6ABQAlGYAClLAGAA8vtoA2gC6AHx6qbLiAHQA5h6BVAD02Vpg8sGZMF7o5oG0qJAuarqpdQ0YmUZ0MHTBDjxOLvBInd1EeigY2Lh4gfFUxX6lVIkANKQe3nGlvTwFBXAHhwB6APxwA65wI3RmW0lwAD4o5kboJMDm6Ea8QA)
+
+## Type Narrowing
+
+React Query uses a [discriminated union type](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#discriminated-unions) for the query result, discriminated by the `status` field and the derived status boolean flags. This will allow you to check for e.g. `success` status to make `data` defined:
+
+```ts
+const { data, isSuccess } = useQuery(['test'], () => Promise.resolve(5))
+
+if (isSuccess) {
+    data
+//  ^? const data: number
+}
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFC8MQAdqnhIAJnRh0ANHGCoAysgYN0qVETgBeFBmy48ACgDaVGGphUAurMMBKbQD44ABXIh56AHS1UEADYAbuiGAKx2dry8wCRwhvJKKmqoDgi8cBlwElK8APS5GQB6APy8hLxAA)
+
+## Typing the error field
+
+The type for error defaults to `unknown`. This is in line with what TypeScript gives you per default in a catch clauses (see [useUnknownInCatchVariables](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/#use-unknown-catch-variables)). The safest way to work with `error` would be to perform a runtime check; another way would be to explicitly define types for `data` and `error`:
+
+```ts
+const { error } = useQuery(['groups'], fetchGroups)
+//      ^? const error: unknown
+
+if (error instanceof Error) {
+  error
+// ^? const error: Error
 }
 ```
 
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFCiSw4dAB7AIqUuUpURY1Nx68YeMOjgBxcsjBwAvIjjAAJgC44AO2QgARriK9eDCOdTwS6GAwAWmiNon6ABQAlGYAClLAGAA8vtoA2gC6AHx6qbLiAHQA5h6BVAD02Vpg8sGZMF7o5oG0qJAuarqpdQ0YmUZ0MHTBDjxOLvBIuORQRHooGNi4eIHxVMV+pVSJADSkHt5xpb08BQVwh0cAegD8fcAkcIEj0IaDdOYM6BBXAKJQo8GIvIe3ULx9nAzrxCEA)
+
+```ts
+const { error } = useQuery<Group[], Error>(['groups'], fetchGroups)
+//      ^? const error: Error | null
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFCiSw4dAB7AIqUuUpURY1Nx68YeMOjgBxcsjBwAvIjjAAJgC44AO2QgARriK9eDCOdTwS6GAwAWmiNon6ABQAlGYAClLAGAA8vtoA2gC6AHx6qbLiAHQA5h6BVAD02Vpg8sGZMF7o5oG0qJAuarqpdQ0YmUZ0MHTBDjxOLvBIuORQRHooGNi4eLElSQA0cACiUKPJgfFUxX6lVIlL7p4+Jai9PAUFcNc3AHoA-LxAA)
+
 ## Further Reading
 
 For tips and tricks around type inference, have a look at [React Query and TypeScript](../community/tkdodos-blog#6-react-query-and-typescript) from

src/reactjs/tests/useQueries.test.tsx

@@ -1058,13 +1058,14 @@ describe('useQueries', () => {
 
       await sleep(30)
 
-      expect(results.length).toBe(3)
       expect(results[0]).toMatchObject([
         { data: undefined },
         { data: undefined },
       ])
-      expect(results[1]).toMatchObject([{ data: 1 }, { data: undefined }])
-      expect(results[2]).toMatchObject([{ data: 1 }, { data: 2 }])
+      expect(results[results.length - 1]).toMatchObject([
+        { data: 1 },
+        { data: 2 },
+      ])
     })
 
     it('should throw if the context is necessary and is not passed to useQueries', async () => {