docs: adapter teasers

Author: tannerlinsley

README.md

@@ -28,7 +28,7 @@ Hooks for fetching, caching and updating asynchronous data in React
 
 Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Table](https://github.com/tannerlinsley/react-table), [React Form](https://github.com/tannerlinsley/react-form), [React Charts](https://github.com/tannerlinsley/react-charts)
 
-## Visit [tanstack.com/query](https://tanstack.com/uery) for docs, guides, API and more!
+## Visit [tanstack.com/query](https://tanstack.com/query) for docs, guides, API and more!
 
 Still on **React Query v2**? No problem! Check out the v2 docs here: https://react-query-v2.tanstack.com/. <br />
 Would you like to try **React Query v4beta**? Check out the v4 beta docs here: https://react-query-beta.tanstack.com/.

docs/adapters/react-query.md

@@ -0,0 +1,37 @@
+---
+title: React Query
+---
+
+The `react-query` package offers a 1st-class API for using TanStack Query via React. However, all of the primitives you receive from these hooks are core APIs that are shared across all of the TanStack Adapters including the Query Client, query results, query subscriptions, etc.
+
+## Example
+
+```tsx
+import { QueryClient, useQuery } from 'react-query'
+
+const queryClient = new QueryClient()
+
+function Example() {
+  const query = useQuery('todos', fetchTodos)
+
+  return (
+    <div>
+      {query.isLoading
+        ? 'Loading...'
+        : query.isError
+        ? 'Error!'
+        : query.data
+        ? query.data.map((todo) => <div key={todo.id}>{todo.title}</div>)
+        : null}
+    </div>
+  )
+}
+
+function App () {
+  return (
+    <QueryClientProvider value={queryClient}>
+      <Example />
+    </QueryClientProvider>
+  )
+}
+```

docs/adapters/solid-query.md

@@ -0,0 +1,10 @@
+---
+title: Solid Query (Coming Soon)
+---
+
+
+> ⚠️ This module has not yet been developed. It requires an adapter similar to `react-query` to work. We estimate the amount of code to do this is low-to-moderate, but does require familiarity with the SolidJS framework. If you would like to contribute this adapter, please open a PR!
+
+The `@tanstack/solid-query` package offers a 1st-class API for using TanStack Query via Solid. However, all of the primitives you receive from this API are core APIs that are shared across all of the TanStack Adapters including the Query Client, query results, query subscriptions, etc.
+
+

docs/adapters/svelte-query.md

@@ -0,0 +1,7 @@
+---
+title: Svelte Query (Coming Soon)
+---
+
+> ⚠️ This module has not yet been developed. It requires an adapter similar to `react-query` to work. We estimate the amount of code to do this is low-to-moderate, but does require familiarity with the Svelte framework. If you would like to contribute this adapter, please open a PR!
+
+The `@tanstack/svelte-query` package offers a 1st-class API for using TanStack Query via Svelte. However, all of the primitives you receive from this API are core APIs that are shared across all of the TanStack Adapters including the Query Client, query results, query subscriptions, etc.

docs/adapters/vue-query.md

@@ -0,0 +1,7 @@
+---
+title: Solid Query (Coming Soon)
+---
+
+> ⚠️ This module has not yet been developed. It requires an adapter similar to `react-query` to work. We estimate the amount of code to do this is low-to-moderate, but does require familiarity with the Vue framework. If you would like to contribute this adapter, please open a PR!
+
+The `@tanstack/vue-query` package offers a 1st-class API for using TanStack Query via Solid. However, all of the primitives you receive from this API are core APIs that are shared across all of the TanStack Adapters including the Query Client, query results, query subscriptions, etc.

docs/config.json

@@ -46,6 +46,27 @@
         }
       ]
     },
+    {
+      "label": "Adapters",
+      "children": [
+        {
+          "label": "React Query",
+          "to": "adapters/react-query"
+        },
+        {
+          "label": "Solid Query (Coming Soon)",
+          "to": "#"
+        },
+        {
+          "label": "Vue Query (Coming Soon)",
+          "to": "#"
+        },
+        {
+          "label": "Svelte Query (Coming Soon)",
+          "to": "#"
+        }
+      ]
+    },
     {
       "label": "Guides & Concepts",
       "children": [