docs now reference react docs (most of them atleast)

Author: theVedanta

docs/framework/preact/comparison.md

@@ -1,55 +1,6 @@
 ---
 id: graphql
 title: GraphQL
+ref: docs/framework/react/graphql.md
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
 ---
-
-Because Preact Query's fetching mechanisms are agnostically built on Promises, you can use Preact Query with literally any asynchronous data fetching client, including GraphQL!
-
-> Keep in mind that Preact Query does not support normalized caching. While a vast majority of users do not actually need a normalized cache or even benefit from it as much as they believe they do, there may be very rare circumstances that may warrant it so be sure to check with us first to make sure it's truly something you need!
-
-[//]: # 'Codegen'
-
-## Type-Safety and Code Generation
-
-Preact Query, used in combination with `graphql-request^5` and [GraphQL Code Generator](https://graphql-code-generator.com/) provides full-typed GraphQL operations:
-
-```tsx
-import request from 'graphql-request'
-import { useQuery } from '@tanstack/preact-query'
-
-import { graphql } from './gql/gql'
-
-const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
-  query allFilmsWithVariablesQuery($first: Int!) {
-    allFilms(first: $first) {
-      edges {
-        node {
-          id
-          title
-        }
-      }
-    }
-  }
-`)
-
-function App() {
-  // `data` is fully typed!
-  const { data } = useQuery({
-    queryKey: ['films'],
-    queryFn: async () =>
-      request(
-        'https://swapi-graphql.netlify.app/.netlify/functions/index',
-        allFilmsWithVariablesQueryDocument,
-        // variables are type-checked too!
-        { first: 10 },
-      ),
-  })
-  // ...
-}
-```
-
-_You can find a [complete example in the repo](https://github.com/dotansimha/graphql-code-generator/tree/7c25c4eeb77f88677fd79da557b7b5326e3f3950/examples/front-end/react/tanstack-react-query)_
-
-Get started with the [dedicated guide on GraphQL Code Generator documentation](https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue).
-
-[//]: # 'Codegen'

docs/framework/preact/devtools.md

@@ -1,60 +1,6 @@
 ---
 id: background-fetching-indicators
 title: Background Fetching Indicators
+ref: docs/framework/react/guides/background-fetching-indicators.md
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
 ---
-
-A query's `status === 'pending'` state is sufficient enough to show the initial hard-loading state for a query, but sometimes you may want to display an additional indicator that a query is refetching in the background. To do this, queries also supply you with an `isFetching` boolean that you can use to show that it's in a fetching state, regardless of the state of the `status` variable:
-
-[//]: # 'Example'
-
-```tsx
-function Todos() {
-  const {
-    status,
-    data: todos,
-    error,
-    isFetching,
-  } = useQuery({
-    queryKey: ['todos'],
-    queryFn: fetchTodos,
-  })
-
-  return status === 'pending' ? (
-    <span>Loading...</span>
-  ) : status === 'error' ? (
-    <span>Error: {error.message}</span>
-  ) : (
-    <>
-      {isFetching ? <div>Refreshing...</div> : null}
-
-      <div>
-        {todos.map((todo) => (
-          <Todo todo={todo} />
-        ))}
-      </div>
-    </>
-  )
-}
-```
-
-[//]: # 'Example'
-
-## Displaying Global Background Fetching Loading State
-
-In addition to individual query loading states, if you would like to show a global loading indicator when **any** queries are fetching (including in the background), you can use the `useIsFetching` hook:
-
-[//]: # 'Example2'
-
-```tsx
-import { useIsFetching } from '@tanstack/preact-query'
-
-function GlobalLoadingIndicator() {
-  const isFetching = useIsFetching()
-
-  return isFetching ? (
-    <div>Queries are fetching in the background...</div>
-  ) : null
-}
-```
-
-[//]: # 'Example2'

docs/framework/preact/graphql.md

@@ -1,33 +1,6 @@
 ---
 id: caching
 title: Caching Examples
+ref: docs/framework/react/guides/caching.md
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
 ---
-
-> Please thoroughly read the [Important Defaults](./important-defaults.md) before reading this guide
-
-## Basic Example
-
-This caching example illustrates the story and lifecycle of:
-
-- Query Instances with and without cache data
-- Background Refetching
-- Inactive Queries
-- Garbage Collection
-
-Let's assume we are using the default `gcTime` of **5 minutes** and the default `staleTime` of `0`.
-
-- A new instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts.
-  - Since no other queries have been made with the `['todos']` query key, this query will show a hard loading state and make a network request to fetch the data.
-  - When the network request has completed, the returned data will be cached under the `['todos']` key.
-  - The hook will mark the data as stale after the configured `staleTime` (defaults to `0`, or immediately).
-- A second instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts elsewhere.
-  - Since the cache already has data for the `['todos']` key from the first query, that data is immediately returned from the cache.
-  - The new instance triggers a new network request using its query function.
-    - Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](../reference/useQuery.md) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
-  - When the request completes successfully, the cache's data under the `['todos']` key is updated with the new data, and both instances are updated with the new data.
-- Both instances of the `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` query are unmounted and no longer in use.
-  - Since there are no more active instances of this query, a garbage collection timeout is set using `gcTime` to delete and garbage collect the query (defaults to **5 minutes**).
-- Before the cache timeout (gcTime) has completed, another instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts. The query immediately returns the available cached data while the `fetchTodos` function is being run in the background. When it completes successfully, it will populate the cache with fresh data.
-- The final instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` unmounts.
-- No more instances of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` appear within **5 minutes**.
-  - The cached data under the `['todos']` key is deleted and garbage collected.