Merge pull request #406 from nhost/changeset-release/main

chore: update versions

README.md

@@ -213,6 +213,13 @@ Here are some ways of contributing to making Nhost better:
         </a>
     </td></tr>
 <tr>
+    <td align="center">
+        <a href="https://github.com/hajek-raven">
+            <img src="https://avatars.githubusercontent.com/u/7288737?v=4" width="100;" alt="hajek-raven"/>
+            <br />
+            <sub><b>Filip Hájek</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/jerryjappinen">
             <img src="https://avatars.githubusercontent.com/u/1101002?v=4" width="100;" alt="jerryjappinen"/>
@@ -247,15 +254,15 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Anders Kjær Damgaard</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/rustyb">
             <img src="https://avatars.githubusercontent.com/u/53086?v=4" width="100;" alt="rustyb"/>
             <br />
             <sub><b>Colin Broderick</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/dohomi">
             <img src="https://avatars.githubusercontent.com/u/489221?v=4" width="100;" alt="dohomi"/>
@@ -263,6 +270,13 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Dominic Garms</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/GavanWilhite">
+            <img src="https://avatars.githubusercontent.com/u/2085119?v=4" width="100;" alt="GavanWilhite"/>
+            <br />
+            <sub><b>Gavan Wilhite</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/alveshelio">
             <img src="https://avatars.githubusercontent.com/u/8176422?v=4" width="100;" alt="alveshelio"/>
@@ -283,7 +297,8 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Nirmalya Ghosh</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/timpratim">
             <img src="https://avatars.githubusercontent.com/u/32492961?v=4" width="100;" alt="timpratim"/>
@@ -297,8 +312,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Quentin Decré</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/komninoschat">
             <img src="https://avatars.githubusercontent.com/u/29049104?v=4" width="100;" alt="komninoschat"/>

docs/README.md

@@ -24,7 +24,7 @@ $ pnpm build
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-### Serve
+### Serve
 
 ```bash
 $ pnpm serve

docs/docs/get-started/quick-start/index.md

@@ -1,6 +1,5 @@
 ---
 title: 'Create your app'
-slug: /get-started/quick-start
 sidebar_position: 1
 ---
 

docs/docs/get-started/upgrade/index.md

@@ -21,7 +21,7 @@ cd my-nhost-v2-app
 
 ### Update config
 
-Update `config: 3` to `config: 2` in `nhost/config.yaml`. This will update Hasura's configuration version, and we need to downgrade the version when we export migrations and metadata.
+Update `version: 3` to `version: 2` in `nhost/config.yaml`. This will update Hasura's configuration version, and we need to downgrade the version when we export migrations and metadata.
 
 ### Export current migrations and metadata from Nhost v1
 
@@ -88,15 +88,17 @@ Update `config: 2` to `config: 3` in `nhost/config.yaml`.
 
 ### Pull migrations and metadata from our local instance
 
-:::tip
-You can not use port `1337` in these requests. You have to use the specific port Huasra uses. Go to the Hasura Console under API and look what port Hasura is using under GraphQL Endpoint.
-:::
+In the `nhost/` folder, run the following command:
 
 ```bash
 hasura migrate create init --from-server --endpoint=http://localhost:[hasura-port] --admin-secret=nhost-admin-secret
-hasura metadata export --from-server --endpoint=http://localhost:[hasura-port] --admin-secret=nhost-admin-secret
+hasura metadata export --endpoint=http://localhost:[hasura-port] --admin-secret=nhost-admin-secret
 ```
 
+:::warning
+You cannot use port `1337` in the commands above. You have to use the specific port Hasura uses. Go to the Hasura Console under API and look for the port Hasura is using under GraphQL Endpoint.
+:::
+
 ### Done
 
 You now have a Nhost v2 project locally with correct migrations and metadata. Happy hacking!

docs/docs/platform/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "The Nhost Platform",
+  "position": 1,
+  "link": { "type": "generated-index", "slug": "/platform" }
+}

docs/docs/platform/authentication/_category_.json

@@ -1,5 +1,5 @@
 {
   "label": "Authentication",
-  "position": 3,
+  "position": 4,
   "link": { "id": "platform/authentication/index", "type": "doc" }
 }

docs/docs/platform/authentication/sign-in-methods.md

@@ -79,7 +79,7 @@ await nhost.auth.signIn({
 
 A user can be created anonymously. This is useful for offering a limited version of your application to your users without having them sign in first.
 
-An anonymous user gets a user ID with the `anonymous` role. This role can be used to [set permissions in Hasura](/platform/database/permissions).
+An anonymous user gets a user ID with the `anonymous` role. This role can be used to [set permissions in Hasura](/platform/graphql/permissions).
 
 ### Deanonymize users
 

docs/docs/platform/database/_category_.json

@@ -1,6 +1,4 @@
 {
   "label": "Database",
-  "position": 2,
-  "collapsed": false,
-  "link": { "type": "generated-index", "slug": "/platform/database" }
+  "position": 2
 }

docs/docs/platform/database/index.md

@@ -1,5 +1,5 @@
 ---
-title: 'Schema'
+title: 'Database'
 sidebar_position: 1
 ---
 

docs/docs/platform/graphql/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "GraphQL",
+  "position": 3
+}

docs/docs/platform/graphql/index.md

@@ -1,31 +1,49 @@
 ---
 title: 'GraphQL'
-sidebar_position: 3
+sidebar_position: 1
 ---
 
-GraphQL is a query language for APIs. It provides a complete and understandable description of the data in your API.
+Every Nhost app has its own autogenerated GraphQL API. The GraphQL API is based on the tables and columns in the [Postgres database](/platform/database) and is instantly available. It's [Hasura GraphQL engine](https://github.com/hasura/graphql-engine) that powers the GraphQL API.
 
-Every Nhost app comes with a GraphQL API, and you can connect to this API with any GraphQL client you like. Most often you'd use the client included in [Nhost SDK](/reference/sdk/graphql).
+The GraphQL API is available at: `https://[subdomain].nhost.run/v1/graphql`.
+
+## What is GraphQL
+
+GraphQL is a query language for APIs that prioritize developer experience. The GraphQL API can be used to both fetch (query) and modify (mutation) data. GraphQL is especially powerful for frontend developers who wants to build products fast.
+
+### GraphQL clients for JavaScript
+
+To interact with the GraphQL API it's recommended to use a GraphQL client:
+
+- [Apollo Client](https://www.apollographql.com/docs/react/)
+- [URQL](https://formidable.com/open-source/urql/)
+- [React Query](https://react-query.tanstack.com/graphql)
+- [SWR](https://swr.vercel.app/docs/data-fetching#graphql)
+
+It's also possible to use the built-in [GraphQL client](/reference/sdk/graphql) in the Nhost JavaScript client.
 
 ---
 
-## GraphQL queries
+## GraphQL Query
 
-You can read your app's data with a GraphQL query.
+A GraphQL query is used to fetch data from the database.
 
-Here is a GraphQL query that selects title, body, and done for every row in your todos table.
+Here is a GraphQL query that selects `title`, `body`, and `isCompleted` for every row in a `todos` table.
+
+**Example:**
 
 ```graphql
 query GetTodos {
   todos {
     title
     body
+    done
     isCompleted
   }
 }
 ```
 
-Response:
+**Response:**
 
 ```json
 {
@@ -33,7 +51,7 @@ Response:
     "todos": [
       {
         "title": "Delete Firebase account",
-        "body": "Migrate to nhost.io",
+        "body": "Migrate to Nhost",
         "isCompleted": true
       }
     ]
@@ -43,7 +61,7 @@ Response:
 
 #### Filtering and sorting
 
-More complex queries utilize filters, limits, sorting and aggregation.
+GraphQL queries More complex queries utilize filters, limits, sorting and aggregation.
 
 This GraphQL query selects all items in the todo table that aren't done, with the total number of comments and the last five comments:
 
@@ -98,6 +116,12 @@ Response:
 }
 ```
 
+:::tip
+Check out Hasura's documentation for full documentation for GraphQL queries.
+
+[Hasura GraphQL queries](https://hasura.io/docs/latest/graphql/core/databases/postgres/queries/index/)
+:::
+
 ---
 
 ## GraphQL mutations

docs/docs/platform/graphql/permissions.md

@@ -1,6 +1,6 @@
 ---
 title: 'Permissions'
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 The GraphQL API is protected by a role-based permission system based on access tokens. Permissions are handled on a per-table basis in Hasura Console.

docs/docs/platform/index.md

@@ -1,35 +1,11 @@
 ---
-title: 'The Nhost platform'
+title: 'The Nhost Platform'
 sidebar_position: 1
 ---
 
-This section:
-
-### Database
-
-- [Schema](/platform/database)
-- [Permissions](/platform/database/permissions)
-- [GraphQL](/platform/database/graphql)
-
-### Authentication
-
-- [Authentication overview](/platform/authentication)
-- [User management](/platform/authentication/user-management)
-- [Sign-in methods](/platform/authentication/sign-in-methods)
-- [OAuth providers](/platform/authentication/social-sign-in)
-- [Email templates](/platform/authentication/email-templates)
-
-### Storage
-
-- [File storage](/platform/storage)
-
-### Serverless functions
-
-- [Creating functions](/platform/serverless-functions)
-- [Event triggers](/platform/serverless-functions/event-triggers)
-
-### Nhost
-
-- [Environment variables](/platform/nhost/environment-variables)
-- [GitHub integration](/platform/nhost/github-integration)
-- [Local development](/platform/nhost/local-development)
+- [Database](/platform/database)
+- [GraphQL](/platform/graphql)
+- [Authentication](/platform/authentication)
+- [Storage](/platform/storage)
+- [Serverless Functions](/platform/serverless-functions)
+- [Nhost](/platform/nhost)

docs/docs/platform/nhost/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Nhost",
-  "position": 6
+  "position": 7
 }

docs/docs/platform/serverless-functions/_category_.json

@@ -1,8 +1,4 @@
 {
   "label": "Serverless Functions",
-  "position": 5,
-  "link": {
-    "type": "generated-index",
-    "slug": "/platform/serverless-functions"
-  }
+  "position": 6
 }

docs/docs/platform/serverless-functions/index.md

@@ -1,5 +1,5 @@
 ---
-title: 'Creating functions'
+title: 'Serverless Functions'
 sidebar_position: 1
 ---
 
@@ -39,19 +39,19 @@ HTTP endpoints are automatically generated based on the file structure under `fu
 
 As such, given this file structure:
 
-```js
-functions / index.js;
-functions / users / index.ts;
-functions / active.ts;
-functions / my - company.js;
+```text
+functions/index.js
+functions/users/index.ts
+functions/active.ts
+functions/my-company.js
 ```
 
 The following endpoints will be available:
 
-- https://yourappid.nhost.run/v1/functions/ - (functions/index.js)
-- https://yourappid.nhost.run/v1/functions/users - (functions/users/index.ts)
-- https://yourappid.nhost.run/v1/functions/users/active - (functions/users/active.ts)
-- https://yourappid.nhost.run/v1/functions/my-company - (functions/my-company.js)
+- https://yourappid.nhost.run/v1/functions/ from `functions/index.js`.
+- https://yourappid.nhost.run/v1/functions/users from `functions/users/index.ts`.
+- https://yourappid.nhost.run/v1/functions/users/active from `functions/users/active.ts`.
+- https://yourappid.nhost.run/v1/functions/my-company from `functions/my-company.js`.
 
 If you've used Netlify or Vercel, this routing logic will be familiar to you.
 
@@ -59,6 +59,4 @@ If you've used Netlify or Vercel, this routing logic will be familiar to you.
 
 ## Infrastructure
 
-In production, serverless functions are deployed on AWS Lambda.
-
-When developing locally, you must have the correct runtime installed on your machine.
+Serverless Functions are deployed to AWS Lambda in the same region as your app.

docs/docs/platform/storage/_category_.json

@@ -1,5 +1,4 @@
 {
   "label": "Storage",
-  "position": 4,
-  "link": { "type": "generated-index", "slug": "/platform/storage" }
+  "position": 5
 }

docs/docs/platform/storage/index.md

@@ -1,6 +1,5 @@
 ---
-title: 'File storage'
-sidebar_position: 1
+title: 'Storage'
 ---
 
 Nhost stores and serves files of any type in your backend.

docs/docusaurus.config.js

@@ -34,7 +34,7 @@ const config = {
           sidebarPath: require.resolve('./sidebars.js'),
           remarkPlugins: [require('mdx-mermaid')],
           // Please change this to your repo.
-          editUrl: 'https://github.com/nhost/nhost/blob/main/docs/',
+          editUrl: 'https://github.com/nhost/nhost/edit/main/docs/',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
@@ -51,6 +51,12 @@ const config = {
         disableSwitch: false,
         respectPrefersColorScheme: true,
       },
+      metadata: [
+        {
+          name: 'og:image',
+          content: 'https://docs.nhost.io/img/splash.png',
+        },
+      ],
       navbar: {
         hideOnScroll: true,
         logo: {

docs/sidebars.js

@@ -19,9 +19,8 @@ const sidebars = {
       label: 'Quick Start',
       type: 'category',
       collapsed: false,
-      link: { id: 'get-started/quick-start/create-your-app', type: 'doc' },
       items: [
-        'get-started/quick-start/create-your-app',
+        'get-started/quick-start/index',
         'get-started/quick-start/schema',
         'get-started/quick-start/javascript-client',
         'get-started/quick-start/permissions',
@@ -30,13 +29,11 @@ const sidebars = {
     {
       label: 'Authentication',
       type: 'category',
-      link: { id: 'get-started/authentication/index', type: 'doc' },
       items: ['get-started/authentication/index'],
     },
     {
       label: 'CLI Workflow',
       type: 'category',
-      link: { id: 'get-started/cli-workflow/index', type: 'doc' },
       items: [
         'get-started/cli-workflow/index',
         'get-started/cli-workflow/workflow-setup',
@@ -48,7 +45,6 @@ const sidebars = {
     {
       label: 'Upgrade',
       type: 'category',
-      link: { id: 'get-started/upgrade/index', type: 'doc' },
       items: ['get-started/upgrade/index'],
     },
   ],

packages/apollo/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/apollo
 
+## 0.4.0
+
+### Minor Changes
+
+- f6093a6: Use graphql-ws instead of subscriptions-transport-ws
+
 ## 0.3.9
 
 ### Patch Changes

packages/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "Nhost Apollo Client library",
   "license": "MIT",
   "keywords": [
@@ -55,11 +55,11 @@
   "dependencies": {
     "@nhost/core": "workspace:^",
     "graphql": "16",
-    "subscriptions-transport-ws": "^0.11.0"
+    "graphql-ws": "^5.7.0"
   },
   "devDependencies": {
     "@apollo/client": "^3.5.8",
-    "xstate": "^4.30.5",
-    "@nhost/nhost-js": "workspace:^"
+    "@nhost/nhost-js": "workspace:^",
+    "xstate": "^4.30.5"
   }
 }

packages/apollo/src/index.ts

@@ -1,5 +1,3 @@
-import { SubscriptionClient } from 'subscriptions-transport-ws'
-
 import {
   ApolloClient,
   ApolloClientOptions,
@@ -11,9 +9,11 @@ import {
   WatchQueryFetchPolicy
 } from '@apollo/client'
 import { setContext } from '@apollo/client/link/context'
-import { WebSocketLink } from '@apollo/client/link/ws'
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
 import { getMainDefinition } from '@apollo/client/utilities'
 import { NhostClient } from '@nhost/nhost-js'
+
+import { createRestartableClient } from './ws'
 const isBrowser = typeof window !== 'undefined'
 
 export type NhostApolloClientOptions = {
@@ -66,33 +66,31 @@ export const createApolloClient = ({
   }
 
   const uri = backendUrl
-  const wsUri = uri.startsWith('https') ? uri.replace(/^https/, 'wss') : uri.replace(/^http/, 'ws')
 
-  let webSocketClient: SubscriptionClient | null = null
-  if (isBrowser) {
-    webSocketClient = new SubscriptionClient(wsUri, {
-      lazy: true,
-      reconnect: true,
+  const wsClient =
+    isBrowser &&
+    createRestartableClient({
+      url: uri.startsWith('https') ? uri.replace(/^https/, 'wss') : uri.replace(/^http/, 'ws'),
       connectionParams: () => ({
         headers: getAuthHeaders()
       })
     })
-  }
+  const wsLink = wsClient && new GraphQLWsLink(wsClient)
 
-  const httplink = createHttpLink({
-    uri
-  })
-
-  const authLink = setContext((_, { headers }) => {
+  const httpLink = setContext((_, { headers }) => {
     return {
       headers: {
         ...headers,
         ...getAuthHeaders()
       }
     }
-  })
+  }).concat(
+    createHttpLink({
+      uri
+    })
+  )
 
-  const link = webSocketClient
+  const link = wsLink
     ? split(
         ({ query }) => {
           const mainDefinition = getMainDefinition(query)
@@ -105,10 +103,10 @@ export const createApolloClient = ({
 
           return kind === 'OperationDefinition' && operation === 'subscription'
         },
-        new WebSocketLink(webSocketClient),
-        authLink.concat(httplink)
+        wsLink,
+        httpLink
       )
-    : authLink.concat(httplink)
+    : httpLink
 
   const apolloClientOptions: ApolloClientOptions<any> = {
     cache: cache || new InMemoryCache(),
@@ -128,26 +126,18 @@ export const createApolloClient = ({
 
   interpreter?.onTransition(async (state, event) => {
     const newToken = state.context.accessToken.value
-
-    if (token !== newToken) {
+    if (['SIGNOUT', 'SIGNED_IN', 'TOKEN_CHANGED'].includes(event.type)) {
       token = newToken
-
-      if (isBrowser && webSocketClient) {
-        if (webSocketClient.status === 1) {
-          // must close first to avoid race conditions
-          webSocketClient.close()
-
-          // @ts-expect-error
-          webSocketClient.tryReconnect()
+      if (event.type === 'SIGNOUT') {
+        try {
+          await client.resetStore()
+        } catch (error) {
+          console.error('Error resetting Apollo client cache')
+          console.error(error)
         }
-
-        if (!newToken && event.type === 'SIGNOUT') {
-          try {
-            await client.resetStore()
-          } catch (error) {
-            console.error('Error resetting Apollo client cache')
-            console.error(error)
-          }
+      } else {
+        if (isBrowser && wsClient && wsClient.started()) {
+          wsClient.restart()
         }
       }
     }

packages/apollo/src/ws.ts

@@ -0,0 +1,53 @@
+// * See https://github.com/enisdenjo/graphql-ws#graceful-restart
+import { Client, ClientOptions, createClient } from 'graphql-ws'
+
+export interface RestartableClient extends Client {
+  restart(): void
+  started(): boolean
+}
+
+export function createRestartableClient(options: ClientOptions): RestartableClient {
+  let restartRequested = false
+  let restart = () => {
+    restartRequested = true
+  }
+  let _started = false
+  const started = () => _started
+
+  const client = createClient({
+    ...options,
+    on: {
+      ...options.on,
+      connected: () => {
+        _started = true
+      },
+      opened: (originalSocket) => {
+        const socket = originalSocket as WebSocket
+        options.on?.opened?.(socket)
+
+        restart = () => {
+          if (socket.readyState === WebSocket.OPEN) {
+            // if the socket is still open for the restart, do the restart
+            socket.close(4205, 'Client Restart')
+          } else {
+            // otherwise the socket might've closed, indicate that you want
+            // a restart on the next opened event
+            restartRequested = true
+          }
+        }
+
+        // just in case you were eager to restart
+        if (restartRequested) {
+          restartRequested = false
+          restart()
+        }
+      }
+    }
+  })
+
+  return {
+    ...client,
+    restart: () => restart(),
+    started
+  }
+}

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nhost/nextjs
 
+## 1.0.14
+
+### Patch Changes
+
+- Updated dependencies [ab06e96]
+- Updated dependencies [ccba0b5]
+  - @nhost/nhost-js@1.1.0
+  - @nhost/react@0.5.3
+
 ## 1.0.13
 
 ### Patch Changes

packages/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nextjs",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Nhost NextJS library",
   "license": "MIT",
   "keywords": [

packages/nhost-js/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @nhost/nhost-js
 
+## 1.1.0
+
+### Minor Changes
+
+- ccba0b5: Add `graphql-tag` support for GraphQL client
+  It is now possible to use a `graphql-tag` argument with `nhost.graphql.request`:
+
+  ```js
+  import gql from 'graphql-tag'
+
+  const QUERY = gql`
+    query {
+      books {
+        id
+        title
+      }
+    }
+  `
+
+  const { data, error } = await nhost.graphql.request(QUERY)
+  ```
+
+### Patch Changes
+
+- ab06e96: Add generic types for NhostFunctionsClient and NhostGraphqlClient request method return type and variables.
+
 ## 1.0.11
 
 ### Patch Changes

packages/nhost-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nhost-js",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "description": "Nhost JavaScript SDK",
   "license": "MIT",
   "keywords": [
@@ -59,6 +59,10 @@
     "query-string": "^7.0.1"
   },
   "devDependencies": {
-    "@nhost/core": "workspace:^"
+    "@nhost/core": "workspace:^",
+    "graphql": "16"
+  },
+  "peerDependencies": {
+    "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"
   }
 }

packages/nhost-js/src/clients/functions.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 
 import { FunctionCallResponse } from '../types'
 export interface NhostFunctionsConstructorParams {
@@ -18,7 +18,11 @@ export class NhostFunctionsClient {
     })
   }
 
-  async call(url: string, data: any, config?: AxiosRequestConfig): Promise<FunctionCallResponse> {
+  async call<T = unknown, D = any>(
+    url: string,
+    data: D,
+    config?: AxiosRequestConfig
+  ): Promise<FunctionCallResponse<T>> {
     const headers = {
       ...this.generateAccessTokenHeaders(),
       ...config?.headers
@@ -26,7 +30,7 @@ export class NhostFunctionsClient {
 
     let res
     try {
-      res = await this.instance.post(url, data, { ...config, headers })
+      res = await this.instance.post<T, AxiosResponse<T>, D>(url, data, { ...config, headers })
     } catch (error) {
       if (error instanceof Error) {
         return { res: null, error }

packages/nhost-js/src/clients/graphql.ts

@@ -1,4 +1,6 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
+import type { DocumentNode } from 'graphql'
+import { print } from 'graphql/language/printer'
 
 import { GraphqlRequestResponse, GraphqlResponse } from '../types'
 
@@ -21,33 +23,47 @@ export class NhostGraphqlClient {
     })
   }
 
-  async request(
-    document: string,
-    variables?: any,
+  async request<T = any, V = any>(
+    document: string | DocumentNode,
+    variables?: V,
     config?: AxiosRequestConfig
-  ): Promise<GraphqlRequestResponse> {
+  ): Promise<GraphqlRequestResponse<T>> {
     // add auth headers if any
     const headers = {
       ...config?.headers,
       ...this.generateAccessTokenHeaders()
     }
 
-    const operationName = ''
-
-    let responseData
     try {
-      const res = await this.instance.post(
+      const operationName = ''
+      const res = await this.instance.post<GraphqlResponse<T>>(
         '',
         {
           operationName: operationName || undefined,
-          query: document,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          query: typeof document === 'string' ? document : print(document),
           variables
         },
         { ...config, headers }
       )
 
-      responseData = res.data
+      const responseData = res.data
+      const { data } = responseData
+
+      if (responseData.errors) {
+        return {
+          data: null,
+          error: responseData.errors
+        }
+      }
+
+      if (typeof data !== 'object' || Array.isArray(data) || data === null) {
+        return {
+          data: null,
+          error: new Error('incorrect response data from GraphQL server')
+        }
+      }
+
+      return { data, error: null }
     } catch (error) {
       if (error instanceof Error) {
         return { data: null, error }
@@ -58,24 +74,6 @@ export class NhostGraphqlClient {
         error: new Error('Unable to get do GraphQL request')
       }
     }
-
-    if (typeof responseData !== 'object' || Array.isArray(responseData) || responseData === null) {
-      return {
-        data: null,
-        error: new Error('incorrect response data from GraphQL server')
-      }
-    }
-
-    responseData = responseData as GraphqlResponse
-
-    if (responseData.errors) {
-      return {
-        data: null,
-        error: responseData.errors
-      }
-    }
-
-    return { data: responseData.data, error: null }
   }
 
   getUrl(): string {

packages/nhost-js/src/types.ts

@@ -1,18 +1,18 @@
 import type { AxiosResponse } from 'axios'
 
-export type GraphqlRequestResponse =
+export type GraphqlRequestResponse<T = unknown> =
   | {
       data: null
-      error: Error | object
+      error: Error | object | object[]
     }
   | {
-      data: unknown
+      data: T
       error: null
     }
 
-export type FunctionCallResponse =
+export type FunctionCallResponse<T = unknown> =
   | {
-      res: AxiosResponse
+      res: AxiosResponse<T>
       error: null
     }
   | {
@@ -20,7 +20,7 @@ export type FunctionCallResponse =
       error: Error
     }
 
-export interface GraphqlResponse {
+export interface GraphqlResponse<T = object> {
   errors?: object[]
-  data?: object
+  data?: T
 }

packages/nhost-js/tests/graphql.test.ts

@@ -5,6 +5,9 @@ const BACKEND_URL = 'http://localhost:1337'
 const nhost = new NhostClient({
   backendUrl: BACKEND_URL
 })
+
+type User = { id: string; displayName: string }
+
 describe('main tests', () => {
   it('getUrl()', async () => {
     const graphqlUrl = await nhost.graphql.getUrl()
@@ -21,7 +24,7 @@ describe('main tests', () => {
     }
   }
     `
-    const { data, error } = await nhost.graphql.request(document)
+    const { data, error } = await nhost.graphql.request<{ users: User[] }>(document)
 
     expect(error).toBeTruthy()
     expect(data).toBeNull()
@@ -36,7 +39,7 @@ describe('main tests', () => {
     }
   }
     `
-    const { data, error } = await nhost.graphql.request(
+    const { data, error } = await nhost.graphql.request<{ users: User[] }>(
       document,
       {},
       {
@@ -59,7 +62,7 @@ describe('main tests', () => {
     }
   }
     `
-    const { data, error } = await nhost.graphql.request(
+    const { data, error } = await nhost.graphql.request<{ user: User }, { id: string }>(
       document,
       {
         id: '5ccdb471-8ab2-4441-a3d1-f7f7146dda0c'
@@ -84,7 +87,7 @@ describe('main tests', () => {
     }
   }
     `
-    const { data, error } = await nhost.graphql.request(
+    const { data, error } = await nhost.graphql.request<{ user: User }, { id: string }>(
       document,
       {
         id: 'not-a-uuid'
@@ -109,7 +112,7 @@ describe('main tests', () => {
     }
   }
     `
-    const { data, error } = await nhost.graphql.request(
+    const { data, error } = await nhost.graphql.request<{ user: User }>(
       document,
       {},
       {

packages/react-apollo/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nhost/react-apollo
 
+## 4.0.13
+
+### Patch Changes
+
+- f6093a6: Introduce useAuthSubscription
+- Updated dependencies [f6093a6]
+  - @nhost/apollo@0.4.0
+  - @nhost/react@0.5.3
+
 ## 4.0.12
 
 ### Patch Changes

packages/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "4.0.12",
+  "version": "4.0.13",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [

packages/react-apollo/src/hooks.tsx

@@ -2,8 +2,10 @@ import {
   DocumentNode,
   OperationVariables,
   QueryHookOptions,
+  SubscriptionHookOptions,
   TypedDocumentNode,
-  useQuery
+  useQuery,
+  useSubscription
 } from '@apollo/client'
 import { useAuthenticated } from '@nhost/react'
 
@@ -16,11 +18,22 @@ export function useAuthQuery<TData = any, TVariables = OperationVariables>(
   return useQuery(query, newOptions)
 }
 
+export function useAuthSubscription<TData = any, TVariables = OperationVariables>(
+  subscription: DocumentNode | TypedDocumentNode<TData, TVariables>,
+  options?: SubscriptionHookOptions<TData, TVariables>
+) {
+  const isAuthenticated = useAuthenticated()
+  const newOptions: SubscriptionHookOptions<TData, TVariables> = {
+    ...options,
+    skip: options?.skip || !isAuthenticated
+  }
+  return useSubscription(subscription, newOptions)
+}
+
 // TODO consider other hooks
 /*
 - useAuthLazyQuery
 - useAuthMutation
-- useAuthSubscription
 - useRoleQuery
 - useRoleLazyQuery
 - useRoleMutation

packages/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/react
 
+## 0.5.3
+
+### Patch Changes
+
+- Updated dependencies [ab06e96]
+- Updated dependencies [ccba0b5]
+  - @nhost/nhost-js@1.1.0
+
 ## 0.5.2
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Nhost React library",
   "license": "MIT",
   "keywords": [

pnpm-lock.yaml

@@ -120,14 +120,14 @@ importers:
       '@nhost/core': workspace:^
       '@nhost/nhost-js': workspace:^
       graphql: 15.7.2
-      subscriptions-transport-ws: ^0.11.0
+      graphql-ws: ^5.7.0
       xstate: ^4.30.5
     dependencies:
       '@nhost/core': link:../core
       graphql: 15.7.2
-      subscriptions-transport-ws: 0.11.0_graphql@15.7.2
+      graphql-ws: 5.7.0_graphql@15.7.2
     devDependencies:
-      '@apollo/client': 3.5.10_f3f7eb5e21785ef7d5faca94c1a68824
+      '@apollo/client': 3.5.10_graphql-ws@5.7.0+graphql@15.7.2
       '@nhost/nhost-js': link:../nhost-js
       xstate: 4.30.6
 
@@ -197,6 +197,7 @@ importers:
       '@nhost/hasura-auth-js': workspace:^
       '@nhost/hasura-storage-js': workspace:^
       axios: ^0.23.0
+      graphql: 15.7.2
       jwt-decode: ^3.1.2
       query-string: ^7.0.1
     dependencies:
@@ -207,6 +208,7 @@ importers:
       query-string: 7.1.1
     devDependencies:
       '@nhost/core': link:../core
+      graphql: 15.7.2
 
   packages/react:
     specifiers:
@@ -390,7 +392,7 @@ packages:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.4
 
-  /@apollo/client/3.5.10_f3f7eb5e21785ef7d5faca94c1a68824:
+  /@apollo/client/3.5.10_graphql-ws@5.7.0+graphql@15.7.2:
     resolution: {integrity: sha512-tL3iSpFe9Oldq7gYikZK1dcYxp1c01nlSwtsMz75382HcI6fvQXyFXUCJTTK3wgO2/ckaBvRGw7VqjFREdVoRw==}
     peerDependencies:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
@@ -411,10 +413,10 @@ packages:
       '@wry/trie': 0.3.1
       graphql: 15.7.2
       graphql-tag: 2.12.6_graphql@15.7.2
+      graphql-ws: 5.7.0_graphql@15.7.2
       hoist-non-react-statics: 3.3.2
       optimism: 0.16.1
       prop-types: 15.8.1
-      subscriptions-transport-ws: 0.11.0_graphql@15.7.2
       symbol-observable: 4.0.0
       ts-invariant: 0.9.4
       tslib: 2.3.1
@@ -5780,10 +5782,6 @@ packages:
       - supports-color
     dev: true
 
-  /backo2/1.0.2:
-    resolution: {integrity: sha1-MasayLEpNjRj41s+u2n038+6eUc=}
-    dev: false
-
   /bail/1.0.5:
     resolution: {integrity: sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==}
     dev: false
@@ -8369,10 +8367,6 @@ packages:
       require-like: 0.1.2
     dev: false
 
-  /eventemitter3/3.1.2:
-    resolution: {integrity: sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==}
-    dev: false
-
   /eventemitter3/4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
     dev: false
@@ -9038,6 +9032,15 @@ packages:
       tslib: 2.3.1
     dev: true
 
+  /graphql-ws/5.7.0_graphql@15.7.2:
+    resolution: {integrity: sha512-8yYuvnyqIjlJ/WfebOyu2GSOQeFauRxnfuTveY9yvrDGs2g3kR9Nv4gu40AKvRHbXlSJwTbMJ6dVxAtEyKwVRA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      graphql: '>=0.11 <=16'
+    dependencies:
+      graphql: 15.7.2
+    dev: false
+
   /graphql/15.7.2:
     resolution: {integrity: sha512-AnnKk7hFQFmU/2I9YSQf3xw44ctnSFCfp3zE0N6W174gqe9fWG/2rKaKxROK7CcI3XtERpjEKFqts8o319Kf7A==}
     engines: {node: '>= 10.x'}
@@ -9990,10 +9993,6 @@ packages:
       istanbul-lib-report: 3.0.0
     dev: true
 
-  /iterall/1.3.0:
-    resolution: {integrity: sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==}
-    dev: false
-
   /jest-changed-files/27.5.1:
     resolution: {integrity: sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -13977,23 +13976,6 @@ packages:
     resolution: {integrity: sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==}
     dev: false
 
-  /subscriptions-transport-ws/0.11.0_graphql@15.7.2:
-    resolution: {integrity: sha512-8D4C6DIH5tGiAIpp5I0wD/xRlNiZAPGHygzCe7VzyzUoxHtawzjNAY9SUTXU05/EY2NMY9/9GF0ycizkXr1CWQ==}
-    deprecated: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
-    peerDependencies:
-      graphql: ^15.7.2 || ^16.0.0
-    dependencies:
-      backo2: 1.0.2
-      eventemitter3: 3.1.2
-      graphql: 15.7.2
-      iterall: 1.3.0
-      symbol-observable: 1.2.0
-      ws: 7.5.7
-    transitivePeerDependencies:
-      - bufferutil
-      - utf-8-validate
-    dev: false
-
   /supports-color/5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -14109,11 +14091,6 @@ packages:
       - react-native
     dev: false
 
-  /symbol-observable/1.2.0:
-    resolution: {integrity: sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /symbol-observable/4.0.0:
     resolution: {integrity: sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==}
     engines: {node: '>=0.10'}