docs(QueryStatus): change from enum to union type (TanStack#2073)

* docs: add query status typing change from enum to string literal

* docs: underline links in headings

as their color is inherited from the heading and links are
indistinguishable from the heading itself

* docs: move query status typing change to typescript section

* docs: underline level four heading links too

* docs: remove unnecessary old line from diff

Author: luisadame

docs/src/components/markdown.module.css

@@ -156,6 +156,12 @@
   @apply text-xl;
 }
 
+.markdown > h2 > a,
+.markdown > h3 > a,
+.markdown > h4 > a {
+  @apply underline;
+}
+
 .markdown > .markdown ul {
   @apply list-disc;
 }

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

@@ -416,6 +416,37 @@ setConsole({
 
 In version 3 **this is done automatically when React Query is used in React Native**.
 
+
+### Typescript
+#### `QueryStatus` has been changed from an [enum](https://www.typescriptlang.org/docs/handbook/enums.html#string-enums) to a [union type](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types)
+
+So, if you were checking the status property of a query or mutation against a QueryStatus enum property you will have to check it now against the string literal the enum previously held for each property.
+
+Therefore you have to change the enum properties to their equivalent string literal, like this:
+- `QueryStatus.Idle` -> `'idle'`
+- `QueryStatus.Loading` -> `'loading'`
+- `QueryStatus.Error` -> `'error'`
+- `QueryStatus.Success` -> `'success'`
+
+Here is an example of the changes you would have to make:
+
+```diff
+- import { useQuery, QueryStatus } from 'react-query';
++ import { useQuery } from 'react-query';
+
+const { data, status } = useQuery(['post', id], () => fetchPost(id))
+
+- if (status === QueryStatus.Loading) {
++ if (status === 'loading') {
+  ...
+}
+
+- if (status === QueryStatus.Error) {
++ if (status === 'error') {
+  ...
+}
+```
+
 ## New features
 
 #### Query Data Selectors