feat: react query client (#340)

* feat: react query hooks

* chore: update tests and changelog

* feat: improve tests

* chore: lock file

* feat: fix subscription test

* docs: update readme

* docs: added client references

* docs: update nextjs client docs

* feat: add testapp react-query examples

* feat: add async upload

* chore: update test app

* chore: add to comments

* fix: update test

* chore: removed unused files

* feat: init react-query example

* feat: add react-query fetch support

* feat: add tailwind css

* feat: add nav

* feat: add welcome message

* fix: use object id as key instead of index

* chore: update example

* feat: add type tests

* chore: update gen

* docs: add missing docs

* chore: move type tests into packages

* chore: add readme to vite example

* chore: update gen files

Co-authored-by: “Kaleemullah” <“nixamani5@gmail.com”>

docs-website/config/navigation.js

@@ -195,6 +195,10 @@ const navigation = [
 				title: 'NextJS',
 				href: '/docs/examples/nextjs',
 			},
+			{
+				title: 'NextJS + React Query',
+				href: '/docs/examples/nextjs-react-query',
+			},
 			{
 				title: 'Vite + SWR',
 				href: '/docs/examples/vite-swr',
@@ -455,15 +459,15 @@ const navigation = [
 				href: '/docs/supported-frontend-frameworks',
 			},
 			{
-				title: 'React-JS',
+				title: 'React',
 				href: '/docs/supported-frontend-frameworks/react-js',
 			},
 			{
 				title: 'React Native',
 				href: '/docs/supported-frontend-frameworks/react-native',
 			},
 			{
-				title: 'NextJS',
+				title: 'Next.js',
 				href: '/docs/supported-frontend-frameworks/nextjs',
 			},
 			{
@@ -929,6 +933,27 @@ const navigation = [
 			},
 		],
 	},
+	{
+		title: 'Clients reference',
+		links: [
+			{
+				title: 'TypeScript Client',
+				href: '/docs/clients-reference/typescript-client',
+			},
+			{
+				title: 'SWR',
+				href: '/docs/clients-reference/swr',
+			},
+			{
+				title: 'React Query',
+				href: '/docs/clients-reference/react-query',
+			},
+			{
+				title: 'Next.js',
+				href: '/docs/clients-reference/nextjs',
+			},
+		],
+	},
 	{
 		title: 'Frequently Asked Questions',
 		links: [

docs-website/next.config.js

@@ -17,6 +17,11 @@ const nextConfig = {
 				destination: '/',
 				permanent: true,
 			},
+			{
+				source: '/docs/examples/nextjs-swr',
+				destination: '/docs/examples/nextjs',
+				permanent: true,
+			},
 		]
 	},
 }

docs-website/src/pages/docs/clients-reference/nextjs.md

@@ -0,0 +1,182 @@
+---
+title: Next.js Client
+pageTitle: WunderGraph - Next.js
+description:
+---
+
+The Next.js client uses [SWR](/docs/clients-reference/swr) under the hood.
+
+## Installation
+
+```bash
+npm i @wundergraph/nextjs swr@2.0.0-rc.0
+```
+
+## Configuration
+
+Add `NextJsTemplate` to your WunderGraph configuration:
+
+```typescript
+import { NextJsTemplate } from '@wundergraph/nextjs/dist/template'
+
+// wundergraph.config.ts
+configureWunderGraphApplication({
+  // ... your config
+  codeGenerators: [
+    {
+      templates: [...templates.typescript.all],
+    },
+    {
+      templates: [new NextJsTemplate()],
+      path: '../components/generated',
+    },
+  ],
+})
+```
+
+## Hooks
+
+### useQuery
+
+This hook accepts most [useSWR Options](https://swr.vercel.app/docs/options) except for key and fetcher.
+
+```typescript
+const { data, error, isValidating, isLoading, mutate } = useQuery({
+  operationName: 'Weather',
+  input: {
+    forCity: 'Berlin',
+  },
+  enabled: true,
+})
+```
+
+Calling `mutate` will invalidate and refetch the query.
+
+```typescript
+const { data, mutate } = useQuery({
+  operationName: 'Weather',
+  input: {
+    forCity: 'Berlin',
+  },
+})
+
+mutate()
+```
+
+### useQuery (Live query)
+
+You can turn any query into a live query by adding the `liveQuery` option.
+
+```typescript
+const { data, error, isLoading, isSubscribed, mutate } = useQuery({
+  operationName: 'Weather',
+  input: {
+    forCity: 'Berlin',
+  },
+  liveQuery: true,
+})
+```
+
+### useMutation
+
+This hook accepts most [useSWRMutation Options](https://swr.vercel.app/docs/options) except for key and fetcher.
+
+```typescript
+const { data, error, trigger } = useMutation({
+  operationName: 'SetName',
+})
+
+await trigger({
+  name: 'test',
+})
+
+trigger(
+  {
+    name: 'test',
+  },
+  {
+    throwOnError: false,
+  }
+)
+```
+
+### useSubscription
+
+```typescript
+const { data, error, isLoading, isSubscribed } = useSubscription({
+  operationName: 'Weather',
+  input: {
+    forCity: 'Berlin',
+  },
+  enabled: true,
+  onSuccess(data, key, config) {
+    // called when the subscription is established.
+  },
+  onError(data, key, config) {
+    // called when the subscription failed to establish.
+  },
+})
+```
+
+### useAuth
+
+```typescript
+const { login, logout } = useAuth()
+
+login('github')
+
+logout({ logoutOpenidConnectProvider: true })
+```
+
+### useUser
+
+This hook accepts most [useSWR Options](https://swr.vercel.app/docs/options) except for key and fetcher.
+
+```typescript
+const { data, error, isLoading } = useUser()
+```
+
+## File upload
+
+This hook accepts most [useSWRMutation Options](https://swr.vercel.app/docs/options) except for key and fetcher.
+
+```typescript
+const { upload, data, error } = useFileUpload()
+
+upload(
+  {
+    provider: 'minio',
+    files: [new File([''], 'test.txt')],
+  },
+  {
+    throwOnError: false,
+  }
+)
+```
+
+## SSR
+
+Wrapping the App or Page in `withWunderGraph` will make sure that Server Side Rendering (SSR) works,
+that's it.
+
+```typescript
+import { NextPage } from 'next'
+import { useQuery, withWunderGraph } from '../components/generated/nextjs'
+
+const Home: NextPage = () => {
+  const dragons = useQuery({ operationName: 'Dragons' })
+  return <div>{JSON.stringify(dragons)}</div>
+}
+export default withWunderGraph(Home)
+```
+
+## Global Configuration
+
+You can configure the hooks globally by using the [SWRConfig](https://swr.vercel.app/docs/global-configuration) context.
+
+In case the context configuration isn't working, it's likely due to multiple versions of SWR being installed or due to how PNPM or Yarn PnP link packages.
+To resolve this you can import SWR directly from `@wundergraph/nextjs` to make sure the same instance is used.
+
+```ts
+import { SWRConfig, useSWRConfig } from '@wundergraph/nextjs'
+```