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

chore: update versions

.github/actions/install-dependencies/action.yaml

@@ -40,14 +40,14 @@ runs:
     - shell: bash
       name: Build packages
       if: ${{ inputs.BUILD == 'all' }}
-      run: pnpm build:all
+      run: pnpm run build:all
       env:
         TURBO_TOKEN: ${{ inputs.TURBO_TOKEN }}
         TURBO_TEAM: ${{ inputs.TURBO_TEAM }}
     - shell: bash
       name: Build everything in the monorepo
       if: ${{ inputs.BUILD == 'default' }}
-      run: pnpm build
+      run: pnpm run build
       env:
         TURBO_TOKEN: ${{ inputs.TURBO_TOKEN }}
         TURBO_TEAM: ${{ inputs.TURBO_TEAM }}

.github/workflows/ci.yaml

@@ -8,7 +8,6 @@ on:
       - '**.md'
       - 'LICENSE'
   pull_request:
-    branches: [main]
     types: [opened, synchronize]
     paths-ignore:
       - 'assets/**'
@@ -56,7 +55,7 @@ jobs:
             | xargs -I@ realpath --relative-to=$PWD @ \
             | xargs -I@ jq "if (.scripts.e2e | length) != 0  then {name: .name, path: \"@\"} else null end" @/package.json \
             | awk "!/null/" \
-            | jq -c --slurp)
+            | jq -c --slurp 'map(select(length > 0))')
           echo "matrix=$PACKAGES" >> $GITHUB_OUTPUT
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}

config/tsconfig.base.json

@@ -45,6 +45,9 @@
       "@nhost/docgen": [
         "../packages/docgen/src/index.ts"
       ],
+      "@nhost/graphql-js": [
+        "../packages/graphql-js/src/index.ts"
+      ],
       "@nhost/hasura-auth-js": [
         "../packages/hasura-auth-js/src/index.ts"
       ],

config/vite.lib.config.js

@@ -1,7 +1,6 @@
 import replace from '@rollup/plugin-replace'
 import fs from 'fs'
 import path from 'path'
-
 import { defineConfig } from 'vite'
 import dts from 'vite-plugin-dts'
 import tsconfigPaths from 'vite-tsconfig-paths'
@@ -61,7 +60,6 @@ export default defineConfig({
           '@apollo/client/utilities': '@apollo/client/utilities',
           'graphql-ws': 'graphql-ws',
           xstate: 'xstate',
-          axios: 'axios',
           'js-cookie': 'Cookies',
           react: 'React',
           'react-dom': 'ReactDOM',

dashboard/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @nhost/dashboard
 
+## 0.11.17
+
+### Patch Changes
+
+- f673adea: fix(dashboard): set correct Content-Type for user creation
+- 445d8ef4: chore(deps): bump `@nhost/react-apollo` to 5.0.4
+- 445d8ef4: chore(deps): bump `@nhost/nextjs` to 1.13.9
+- 0368663d: fix(dashboard): allow permission editing for auth and storage schemas
+- Updated dependencies [445d8ef4]
+- Updated dependencies [445d8ef4]
+  - @nhost/react-apollo@5.0.4
+  - @nhost/nextjs@1.13.9
+
+## 0.11.16
+
+### Patch Changes
+
+- b755e908: fix(dashboard): use correct date for last seen
+- 2d9145f9: chore(deps): revert GraphQL client
+- 1ddf704c: fix(dashboard): don't show false positive message for failed user creation
+  - @nhost/react-apollo@5.0.3
+  - @nhost/nextjs@1.13.8
+
+## 0.11.15
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.2
+- @nhost/nextjs@1.13.7
+
+## 0.11.14
+
+### Patch Changes
+
+- 2cc18dcb: fix(dashboard): prevent permission editor dropdown from being always open
+
+## 0.11.13
+
+### Patch Changes
+
+- 3343a363: chore(dashboard): bump `@testing-library/react` to v14 and `@testing-library/dom` to v9
+  - @nhost/react-apollo@5.0.1
+  - @nhost/nextjs@1.13.6
+
 ## 0.11.12
 
 ### Patch Changes

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.11.12",
+  "version": "0.11.17",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -44,7 +44,6 @@
     "@tanstack/react-table": "^8.5.30",
     "@tanstack/react-virtual": "^3.0.0-beta.23",
     "analytics-node": "^6.2.0",
-    "axios": "^0.27.2",
     "bcryptjs": "^2.4.3",
     "clsx": "^1.2.1",
     "cross-fetch": "^3.1.5",
@@ -98,9 +97,9 @@
     "@storybook/manager-webpack5": "^6.5.14",
     "@storybook/react": "^6.5.14",
     "@storybook/testing-library": "^0.0.13",
-    "@testing-library/dom": "^8.19.0",
+    "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",

dashboard/src/components/common/ControlledAutocomplete/ControlledAutocomplete.tsx

@@ -52,7 +52,9 @@ function ControlledAutocomplete(
 
   return (
     <Autocomplete
-      inputValue={typeof field.value === 'string' ? field.value : undefined}
+      inputValue={
+        typeof field.value !== 'object' ? field.value.toString() : undefined
+      }
       {...props}
       {...field}
       ref={mergeRefs([field.ref, ref])}

dashboard/src/components/dataBrowser/DataBrowserSidebar/DataBrowserSidebar.tsx

@@ -328,53 +328,50 @@ function DataBrowserSidebarContent({
                   className="group"
                   key={tablePath}
                   secondaryAction={
-                    !isSelectedSchemaLocked && (
-                      <Dropdown.Root
-                        id="table-management-menu"
-                        onOpen={() => setSidebarMenuTable(tablePath)}
-                        onClose={() => setSidebarMenuTable(undefined)}
+                    <Dropdown.Root
+                      id="table-management-menu"
+                      onOpen={() => setSidebarMenuTable(tablePath)}
+                      onClose={() => setSidebarMenuTable(undefined)}
+                    >
+                      <Dropdown.Trigger
+                        asChild
+                        hideChevron
+                        disabled={tablePath === removableTable}
                       >
-                        <Dropdown.Trigger
-                          asChild
-                          hideChevron
-                          disabled={tablePath === removableTable}
+                        <IconButton
+                          variant="borderless"
+                          color={isSelected ? 'primary' : 'secondary'}
+                          className={twMerge(
+                            !isSelected &&
+                              'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 group-active:opacity-100',
+                          )}
                         >
-                          <IconButton
-                            variant="borderless"
-                            color={isSelected ? 'primary' : 'secondary'}
-                            className={twMerge(
-                              !isSelected &&
-                                'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 group-active:opacity-100',
-                            )}
+                          <DotsHorizontalIcon />
+                        </IconButton>
+                      </Dropdown.Trigger>
+
+                      <Dropdown.Content menu PaperProps={{ className: 'w-52' }}>
+                        {isGitHubConnected ? (
+                          <Dropdown.Item
+                            className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                            onClick={() =>
+                              handleEditPermissionClick(
+                                table.table_schema,
+                                table.table_name,
+                                true,
+                              )
+                            }
                           >
-                            <DotsHorizontalIcon />
-                          </IconButton>
-                        </Dropdown.Trigger>
+                            <UsersIcon
+                              className="h-4 w-4"
+                              sx={{ color: 'text.secondary' }}
+                            />
 
-                        <Dropdown.Content
-                          menu
-                          PaperProps={{ className: 'w-52' }}
-                        >
-                          {isGitHubConnected ? (
-                            <Dropdown.Item
-                              className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
-                              onClick={() =>
-                                handleEditPermissionClick(
-                                  table.table_schema,
-                                  table.table_name,
-                                  true,
-                                )
-                              }
-                            >
-                              <UsersIcon
-                                className="h-4 w-4"
-                                sx={{ color: 'text.secondary' }}
-                              />
-
-                              <span>View Permissions</span>
-                            </Dropdown.Item>
-                          ) : (
-                            [
+                            <span>View Permissions</span>
+                          </Dropdown.Item>
+                        ) : (
+                          [
+                            !isSelectedSchemaLocked && (
                               <Dropdown.Item
                                 key="edit-table"
                                 className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
@@ -400,32 +397,38 @@ function DataBrowserSidebarContent({
                                 />
 
                                 <span>Edit Table</span>
-                              </Dropdown.Item>,
+                              </Dropdown.Item>
+                            ),
+                            !isSelectedSchemaLocked && (
                               <Divider
                                 key="edit-table-separator"
                                 component="li"
-                              />,
-                              <Dropdown.Item
-                                key="edit-permissions"
-                                className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
-                                onClick={() =>
-                                  handleEditPermissionClick(
-                                    table.table_schema,
-                                    table.table_name,
-                                  )
-                                }
-                              >
-                                <UsersIcon
-                                  className="h-4 w-4"
-                                  sx={{ color: 'text.secondary' }}
-                                />
+                              />
+                            ),
+                            <Dropdown.Item
+                              key="edit-permissions"
+                              className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                              onClick={() =>
+                                handleEditPermissionClick(
+                                  table.table_schema,
+                                  table.table_name,
+                                )
+                              }
+                            >
+                              <UsersIcon
+                                className="h-4 w-4"
+                                sx={{ color: 'text.secondary' }}
+                              />
 
-                                <span>Edit Permissions</span>
-                              </Dropdown.Item>,
+                              <span>Edit Permissions</span>
+                            </Dropdown.Item>,
+                            !isSelectedSchemaLocked && (
                               <Divider
                                 key="edit-permissions-separator"
                                 component="li"
-                              />,
+                              />
+                            ),
+                            !isSelectedSchemaLocked && (
                               <Dropdown.Item
                                 key="delete-table"
                                 className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
@@ -443,12 +446,12 @@ function DataBrowserSidebarContent({
                                 />
 
                                 <span>Delete Table</span>
-                              </Dropdown.Item>,
-                            ]
-                          )}
-                        </Dropdown.Content>
-                      </Dropdown.Root>
-                    )
+                              </Dropdown.Item>
+                            ),
+                          ]
+                        )}
+                      </Dropdown.Content>
+                    </Dropdown.Root>
                   }
                 >
                   <ListItem.Button

dashboard/src/components/dataBrowser/EditPermissionsForm/RolePermissionEditorForm.tsx

@@ -245,7 +245,7 @@ export default function RolePermissionEditorForm({
             : permission?.check,
         backend_only: values.backendOnly,
         computed_fields:
-          permission?.computed_fields.length > 0
+          permission?.computed_fields?.length > 0
             ? permission?.computed_fields
             : null,
       },

dashboard/src/components/dataBrowser/EditPermissionsForm/sections/RowPermissionsSection.tsx

@@ -6,6 +6,7 @@ import Input from '@/ui/v2/Input';
 import Radio from '@/ui/v2/Radio';
 import RadioGroup from '@/ui/v2/RadioGroup';
 import Text from '@/ui/v2/Text';
+import type { FocusEvent } from 'react';
 import { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import PermissionSettingsSection from './PermissionSettingsSection';
@@ -130,7 +131,13 @@ export default function RowPermissionsSection({
 
       {action === 'select' && (
         <Input
-          {...register('limit')}
+          {...register('limit', {
+            onBlur: (event: FocusEvent<HTMLInputElement>) => {
+              if (!event.target.value) {
+                setValue('limit', null);
+              }
+            },
+          })}
           disabled={disabled}
           id="limit"
           type="number"

dashboard/src/components/dataBrowser/EditPermissionsForm/validationSchemas.ts

@@ -43,7 +43,10 @@ const baseValidationSchema = Yup.object().shape({
 });
 
 const selectValidationSchema = baseValidationSchema.shape({
-  limit: Yup.number().min(0, 'Limit must not be negative.').nullable(true),
+  limit: Yup.number()
+    .label('Limit')
+    .min(0, 'Limit must not be negative.')
+    .nullable(true),
   allowAggregations: Yup.boolean().nullable(true),
   queryRootFields: Yup.array().of(Yup.string()).nullable(true),
   subscriptionRootFields: Yup.array().of(Yup.string()).nullable(true),

dashboard/src/components/dataBrowser/RuleGroupEditor/RuleValueInput.tsx

@@ -6,6 +6,7 @@ import ColumnAutocomplete from '@/components/dataBrowser/ColumnAutocomplete';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import type { HasuraOperator } from '@/types/dataBrowser';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import type { AutocompleteOption } from '@/ui/v2/Autocomplete';
 import type { InputProps } from '@/ui/v2/Input';
 import { inputClasses } from '@/ui/v2/Input';
 import Option from '@/ui/v2/Option';
@@ -211,12 +212,13 @@ export default function RuleValueInput({
     <ControlledAutocomplete
       disabled={disabled}
       freeSolo={!isHasuraInput}
-      autoSelect={!isHasuraInput}
       autoHighlight={isHasuraInput}
-      open
-      isOptionEqualToValue={(option, value) => {
-        if (typeof value === 'string') {
-          return option.value.toLowerCase() === (value as string).toLowerCase();
+      isOptionEqualToValue={(
+        option,
+        value: string | number | AutocompleteOption<string>,
+      ) => {
+        if (typeof value !== 'object') {
+          return option.value.toLowerCase() === value?.toString().toLowerCase();
         }
 
         return option.value.toLowerCase() === value.value.toLowerCase();

dashboard/src/components/files/FilesDataGrid/FilesDataGrid.tsx

@@ -277,7 +277,7 @@ export default function FilesDataGrid(props: FilesDataGridProps) {
       }
 
       if (fileError) {
-        throw fileError;
+        throw new Error(fileError.message);
       }
 
       triggerToast(`File has been uploaded successfully (${fileMetadata?.id})`);

dashboard/src/components/home/InviteAnnounce.tsx

@@ -67,7 +67,7 @@ export function InviteAnnounce() {
       triggerToast('An error occurred when trying to accept the invitation.');
 
       return setSubmitState({
-        error: res.error,
+        error: new Error(res.error.message),
         loading: false,
       });
     }

dashboard/src/components/settings/environmentVariables/SystemEnvironmentVariableSettings/SystemEnvironmentVariableSettings.tsx

@@ -107,7 +107,7 @@ export default function SystemEnvironmentVariableSettings() {
             ),
     },
     { key: 'NHOST_AUTH_URL', value: appClient.auth.url },
-    { key: 'NHOST_GRAPHQL_URL', value: appClient.graphql.url },
+    { key: 'NHOST_GRAPHQL_URL', value: appClient.graphql.httpUrl },
     { key: 'NHOST_STORAGE_URL', value: appClient.storage.url },
     { key: 'NHOST_FUNCTIONS_URL', value: appClient.functions.url },
   ];

dashboard/src/components/ui/v2/Autocomplete/Autocomplete.tsx

@@ -222,9 +222,9 @@ function Autocomplete(
     inputValue: inputValue || '',
     getOptionLabel: props.getOptionLabel
       ? props.getOptionLabel
-      : (option) => {
-          if (typeof option === 'string') {
-            return option;
+      : (option: string | number | AutocompleteOption<string>) => {
+          if (typeof option !== 'object') {
+            return option.toString();
           }
 
           return option.label ?? option.dropdownLabel;
@@ -284,33 +284,46 @@ function Autocomplete(
       }}
       PopperComponent={AutocompletePopper}
       popupIcon={<ChevronDownIcon sx={{ width: 12, height: 12 }} />}
-      getOptionLabel={(option) => {
-        if (typeof option === 'string') {
-          return option;
+      getOptionLabel={(
+        option: string | number | AutocompleteOption<string>,
+      ) => {
+        if (!option) {
+          return '';
+        }
+
+        if (typeof option !== 'object') {
+          return option.toString();
         }
 
         return option.label ?? option.dropdownLabel;
       }}
-      isOptionEqualToValue={(option, value) => {
+      isOptionEqualToValue={(
+        option,
+        value: string | number | AutocompleteOption<string>,
+      ) => {
         if (!value) {
           return false;
         }
 
-        if (typeof value === 'string') {
-          return option.value === value;
+        if (typeof value !== 'object') {
+          return option.value.toString() === value.toString();
         }
 
         return option.value === value.value && option.custom === value.custom;
       }}
       renderTags={(value, getTagProps) =>
-        value.map((option, index) => (
-          <StyledTag
-            deleteIcon={<XIcon />}
-            size="small"
-            label={typeof option === 'string' ? option : option.value}
-            {...getTagProps({ index })}
-          />
-        ))
+        value.map(
+          (option: string | number | AutocompleteOption<string>, index) => (
+            <StyledTag
+              deleteIcon={<XIcon />}
+              size="small"
+              label={
+                typeof option !== 'object' ? option.toString() : option.value
+              }
+              {...getTagProps({ index })}
+            />
+          ),
+        )
       }
       renderGroup={({ group, key, children }) =>
         group ? (
@@ -323,9 +336,12 @@ function Autocomplete(
           <div key={key}>{children}</div>
         )
       }
-      renderOption={(optionProps, option) => {
-        if (typeof option === 'string') {
-          return <OptionBase {...optionProps}>{option}</OptionBase>;
+      renderOption={(
+        optionProps,
+        option: string | number | AutocompleteOption<string>,
+      ) => {
+        if (typeof option !== 'object') {
+          return <OptionBase {...optionProps}>{option.toString()}</OptionBase>;
         }
 
         return (

dashboard/src/components/users/CreateUserForm/CreateUserForm.tsx

@@ -6,7 +6,7 @@ import Input from '@/ui/v2/Input';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import { yupResolver } from '@hookform/resolvers/yup';
-import axios from 'axios';
+import fetch from 'cross-fetch';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -79,28 +79,37 @@ export default function CreateUserForm({
 
     try {
       await toast.promise(
-        axios.post(signUpUrl, {
-          email,
-          password,
+        fetch(signUpUrl, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, password }),
+        }).then(async (res) => {
+          const data = await res.json();
+
+          if (res.ok) {
+            return data;
+          }
+
+          if (res.status === 409) {
+            setError('email', { message: data?.message });
+          }
+
+          throw new Error(data?.message || 'Something went wrong.');
         }),
         {
           loading: 'Creating user...',
           success: 'User created successfully.',
-          error: 'An error occurred while trying to create the user.',
+          error: (arg) =>
+            arg?.message
+              ? `Error: ${arg.message}`
+              : 'An error occurred while trying to create the user.',
         },
         getToastStyleProps(),
       );
+
       onSuccess?.();
-    } catch (error) {
-      if (error.response?.status === 409) {
-        setError('email', {
-          message: error.response.data.message,
-        });
-        return;
-      }
-      setCreateUserFormError(
-        new Error(error.response.data.message || 'Something went wrong.'),
-      );
+    } catch {
+      // Note: Error is already handled by toast.promise
     }
   }
 
@@ -137,7 +146,7 @@ export default function CreateUserForm({
         {createUserFormError && (
           <Alert
             severity="error"
-            className="grid items-center justify-between grid-flow-col px-4 py-3"
+            className="grid grid-flow-col items-center justify-between px-4 py-3"
           >
             <span className="text-left">
               <strong>Error:</strong> {createUserFormError.message}

dashboard/src/components/users/EditUserForm/EditUserForm.tsx

@@ -268,7 +268,7 @@ export default function EditUserForm({
               Created At
             </InputLabel>
             <Text className="col-span-3 font-medium">
-              {format(new Date(user.createdAt), 'yyyy-MM-dd hh:mm:ss')}
+              {format(new Date(user.createdAt), 'yyyy-MM-dd HH:mm:ss')}
             </Text>
 
             <InputLabel as="h3" className="col-span-1 self-center ">
@@ -276,7 +276,7 @@ export default function EditUserForm({
             </InputLabel>
             <Text className="col-span-3 font-medium">
               {user.lastSeen
-                ? `${format(new Date(user.lastSeen), 'yyyy-mm-dd hh:mm:ss')}`
+                ? `${format(new Date(user.lastSeen), 'yyyy-MM-dd HH:mm:ss')}`
                 : '-'}
             </Text>
           </Box>

docs/docs/graphql/index.mdx

@@ -28,7 +28,7 @@ The GraphQL API is available at `https://[subdomain].graphql.[region].nhost.run/
 
 ## GraphQL Clients for JavaScript
 
-The [Nhost JavaScript client](/reference/javascript) comes with a simple [GraphQL client](/reference/javascript/nhost-js/graphql) that works well for the backend or simple applications.
+The [Nhost JavaScript client](/reference/javascript) comes with a simple [GraphQL client](/reference/javascript/graphql) that works well for the backend or simple applications.
 
 When building more complex frontend applications, we recommend using a more advanced GraphQL client such as:
 

docs/docs/reference/index.md

@@ -10,8 +10,8 @@ In this section:
 - [Overview](/reference/javascript)
 - [Authentication](/reference/javascript/auth)
 - [Storage](/reference/javascript/storage)
-- [Functions](/reference/javascript/nhost-js/functions)
-- [GraphQL](/reference/javascript/nhost-js/graphql)
+- [Functions](/reference/javascript/functions)
+- [GraphQL](/reference/javascript/graphql)
 
 ### React
 

docs/docs/reference/javascript/functions/content/01-call.mdx

@@ -0,0 +1,60 @@
+---
+title: call()
+sidebar_label: call()
+slug: /reference/javascript/functions/call
+description: Use `nhost.functions.call` to call (sending a POST request to) a serverless function.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions/index.ts#L55
+---
+
+# `call()`
+
+## Overload 1 of 2
+
+Use `nhost.functions.call` to call (sending a POST request to) a serverless function.
+
+:::caution Deprecated
+Axios will be replaced by cross-fetch in the near future. Only the headers configuration will be kept.
+:::
+
+### Parameters
+
+---
+
+**<span className="parameter-name">url</span>** <span className="optional-status">required</span> <code>string</code>
+
+---
+
+**<span className="parameter-name">data</span>** <span className="optional-status">optional</span> <code>D</code>
+
+---
+
+**<span className="parameter-name">config</span>** <span className="optional-status">optional</span> <code>AxiosRequestConfig&lt;any&gt; &amp; { useAxios: "true" } &amp; [`NhostFunctionCallConfig`](/reference/javascript/functions/types/nhost-function-call-config) &amp; { useAxios: "true" }</code>
+
+---
+
+## Overload 2 of 2
+
+Use `nhost.functions.call` to call (sending a POST request to) a serverless function.
+
+```ts
+await nhost.functions.call('send-welcome-email', {
+  email: 'joe@example.com',
+  name: 'Joe Doe'
+})
+```
+
+### Parameters
+
+---
+
+**<span className="parameter-name">url</span>** <span className="optional-status">required</span> <code>string</code>
+
+---
+
+**<span className="parameter-name">data</span>** <span className="optional-status">required</span> <code>D</code>
+
+---
+
+**<span className="parameter-name">config</span>** <span className="optional-status">optional</span> <code>[`NhostFunctionCallConfig`](/reference/javascript/functions/types/nhost-function-call-config) &amp; { useAxios: "false" }</code>
+
+---

docs/docs/reference/javascript/functions/content/02-set-access-token.mdx

@@ -0,0 +1,23 @@
+---
+title: setAccessToken()
+sidebar_label: setAccessToken()
+slug: /reference/javascript/functions/set-access-token
+description: Use `nhost.functions.setAccessToken` to a set an access token to be used in subsequent functions requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions/index.ts#L155
+---
+
+# `setAccessToken()`
+
+Use `nhost.functions.setAccessToken` to a set an access token to be used in subsequent functions requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
+
+```ts
+nhost.functions.setAccessToken('some-access-token')
+```
+
+## Parameters
+
+---
+
+**<span className="parameter-name">accessToken</span>** <span className="optional-status">required</span> <code>undefined &#124; string</code>
+
+---

docs/docs/reference/javascript/functions/index.mdx

@@ -0,0 +1,22 @@
+---
+title: NhostFunctionsClient
+sidebar_label: Functions
+description: No description provided.
+slug: /reference/javascript/functions
+custom_edit_url: https://github.com/nhost/nhost/edit/main/docs/docs/reference/javascript/functions/index.mdx
+---
+
+# `NhostFunctionsClient`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`NhostFunctionsConstructorParams`](/reference/javascript/functions/types/nhost-functions-constructor-params)
+
+| Property                                                                                       | Type                | Required | Notes                                                                                     |
+| :--------------------------------------------------------------------------------------------- | :------------------ | :------: | :---------------------------------------------------------------------------------------- |
+| <span className="parameter-name"><span className="light-grey">params.</span>url</span>         | <code>string</code> |    ✔️    | Serverless Functions endpoint.                                                            |
+| <span className="parameter-name"><span className="light-grey">params.</span>adminSecret</span> | <code>string</code> |          | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests. |
+
+---

docs/docs/reference/javascript/functions/types/nhost-function-call-config.mdx

@@ -0,0 +1,19 @@
+---
+title: NhostFunctionCallConfig
+sidebar_label: NhostFunctionCallConfig
+description: Subset of RequestInit parameters that are supported by the functions client
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions/types.ts#L41
+---
+
+# `NhostFunctionCallConfig`
+
+Subset of RequestInit parameters that are supported by the functions client
+
+## Parameters
+
+---
+
+**<span className="parameter-name">headers</span>** <span className="optional-status">optional</span> <code>Record&lt;string, string&gt;</code>
+
+---

docs/docs/reference/javascript/functions/types/nhost-function-call-response.mdx

@@ -0,0 +1,15 @@
+---
+title: NhostFunctionCallResponse
+sidebar_label: NhostFunctionCallResponse
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions/types.ts#L15
+---
+
+# `NhostFunctionCallResponse`
+
+```ts
+type NhostFunctionCallResponse =
+  | { res: { data: T; status: number; statusText: string }; error: null }
+  | { res: null; error: ErrorPayload }
+```

docs/docs/reference/javascript/functions/types/nhost-functions-constructor-params.mdx

@@ -0,0 +1,25 @@
+---
+title: NhostFunctionsConstructorParams
+sidebar_label: NhostFunctionsConstructorParams
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions/types.ts#L4
+---
+
+# `NhostFunctionsConstructorParams`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">url</span>** <span className="optional-status">required</span> <code>string</code>
+
+Serverless Functions endpoint.
+
+---
+
+**<span className="parameter-name">adminSecret</span>** <span className="optional-status">optional</span> <code>string</code>
+
+Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests.
+
+---

docs/docs/reference/javascript/index.mdx

@@ -10,12 +10,12 @@ The Nhost JavaScript client is the primary way of interacting with your Nhost pr
 
 - [Authentication](/reference/javascript/auth)
 - [Storage](/reference/javascript/storage)
-- [Functions](/reference/javascript/nhost-js/functions)
-- [GraphQL](/reference/javascript/nhost-js/graphql)
+- [Functions](/reference/javascript/functions)
+- [GraphQL](/reference/javascript/graphql)
 
 ## Installation
 
-Install the the Nhost client together with GraphQL:
+Install the Nhost client together with GraphQL:
 
 <Tabs groupId="package-manager">
   <TabItem value="npm" label="npm" default>

docs/sidebars.js

@@ -111,12 +111,12 @@ const sidebars = {
           label: 'Functions',
           link: {
             type: 'doc',
-            id: 'reference/docgen/javascript/nhost-js/content/nhost-functions-client/index'
+            id: 'reference/javascript/functions/index'
           },
           items: [
             {
               type: 'autogenerated',
-              dirName: 'reference/docgen/javascript/nhost-js/content/nhost-functions-client/content'
+              dirName: 'reference/javascript/functions/content'
             }
           ]
         },
@@ -125,12 +125,12 @@ const sidebars = {
           label: 'GraphQL',
           link: {
             type: 'doc',
-            id: 'reference/docgen/javascript/nhost-js/content/nhost-graphql-client/index'
+            id: 'reference/docgen/javascript/graphql/content/nhost-graphql-client/index'
           },
           items: [
             {
               type: 'autogenerated',
-              dirName: 'reference/docgen/javascript/nhost-js/content/nhost-graphql-client/content'
+              dirName: 'reference/docgen/javascript/graphql/content/nhost-graphql-client/content'
             }
           ]
         }

examples/codegen-react-apollo/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nhost-examples/codegen-react-apollo
 
+## 0.1.6
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/react` to 2.0.3
+- 445d8ef4: chore(deps): bump `@nhost/react-apollo` to 5.0.4
+- Updated dependencies [445d8ef4]
+- Updated dependencies [445d8ef4]
+- Updated dependencies [445d8ef4]
+  - @nhost/react-apollo@5.0.4
+  - @nhost/react@2.0.3
+
 ## 0.1.5
 
 ### Patch Changes

examples/codegen-react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost-examples/codegen-react-apollo",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "scripts": {
     "codegen": "graphql-codegen",

examples/codegen-react-query/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost-examples/codegen-react-query
 
+## 0.1.6
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/react` to 2.0.3
+- Updated dependencies [445d8ef4]
+  - @nhost/react@2.0.3
+
 ## 0.1.5
 
 ### Patch Changes

examples/codegen-react-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost-examples/codegen-react-query",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "scripts": {
     "codegen": "graphql-codegen",

examples/codegen-react-urql/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nhost-examples/react-urql
 
+## 0.0.3
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/react` to 2.0.3
+- Updated dependencies [445d8ef4]
+- Updated dependencies [445d8ef4]
+  - @nhost/react-urql@2.0.3
+  - @nhost/react@2.0.3
+
 ## 0.0.2
 
 ### Patch Changes

examples/codegen-react-urql/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nhost-examples/codegen-react-urql",
   "private": true,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

examples/multi-tenant-one-to-many/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost-examples/multi-tenant-one-to-many
 
+## 1.0.2
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/nhost-js` version to 2.0.3
+- Updated dependencies [445d8ef4]
+  - @nhost/nhost-js@2.0.3
+
 ## 1.0.1
 
 ### Patch Changes

examples/multi-tenant-one-to-many/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nhost-examples/multi-tenant-one-to-many",
   "private": true,
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {},

examples/nextjs/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nhost-examples/nextjs
 
+## 0.1.6
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/react` to 2.0.3
+- 445d8ef4: chore(deps): bump `@nhost/react-apollo` to 5.0.4
+- 445d8ef4: chore(deps): bump `@nhost/nextjs` to 1.13.9
+- Updated dependencies [445d8ef4]
+- Updated dependencies [445d8ef4]
+- Updated dependencies [445d8ef4]
+  - @nhost/react-apollo@5.0.4
+  - @nhost/nextjs@1.13.9
+  - @nhost/react@2.0.3
+
 ## 0.1.5
 
 ### Patch Changes

examples/nextjs/components/protected-route.tsx

@@ -18,6 +18,7 @@ export function authProtected(Comp) {
     if (isLoading) {
       return <div>Loading...</div>
     }
+
     return <Comp {...props} />
   }
 }

examples/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost-examples/nextjs",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -35,8 +35,8 @@
     "@types/react": "18.0.25",
     "@xstate/inspect": "^0.6.2",
     "eslint-config-next": "12.0.10",
-    "typescript": "4.5.5",
+    "typescript": "^4.8.2",
     "ws": "^8.8.1",
     "xstate": "^4.33.5"
   }
-}
+}

examples/react-apollo/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nhost-examples/react-apollo
 
+## 0.1.8
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/react` to 2.0.3
+- 445d8ef4: chore(deps): bump `@nhost/react-apollo` to 5.0.4
+- Updated dependencies [445d8ef4]
+- Updated dependencies [445d8ef4]
+- Updated dependencies [445d8ef4]
+  - @nhost/react-apollo@5.0.4
+  - @nhost/react@2.0.3
+
 ## 0.1.7
 
 ### Patch Changes

examples/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost-examples/react-apollo",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.6.9",

examples/react-gqty/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost-examples/react-gqty
 
+## 0.0.5
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/react` to 2.0.3
+- Updated dependencies [445d8ef4]
+  - @nhost/react@2.0.3
+
 ## 0.0.4
 
 ### Patch Changes

examples/react-gqty/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nhost-examples/react-gqty",
   "private": true,
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/vue-apollo/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nhost-examples/vue-apollo
 
+## 0.0.6
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/apollo` to 5.0.3
+- Updated dependencies [445d8ef4]
+  - @nhost/apollo@5.0.3
+  - @nhost/vue@1.13.9
+
 ## 0.0.5
 
 ### Patch Changes

examples/vue-apollo/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nhost-examples/vue-apollo",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "prettier": "prettier --check src/",
     "prettier:fix": "prettier --write src/",
@@ -34,7 +34,7 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "@xstate/inspect": "^0.6.2",
     "sass": "1.32.0",
-    "typescript": "^4.8.4",
+    "typescript": "4.9.4",
     "vite": "^4.0.2",
     "vue-tsc": "^0.38.9"
   },

examples/vue-quickstart/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nhost-examples/vue-quickstart
 
+## 0.0.5
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/apollo` to 5.0.3
+- Updated dependencies [445d8ef4]
+  - @nhost/apollo@5.0.3
+  - @nhost/vue@1.13.9
+
 ## 0.0.4
 
 ### Patch Changes

examples/vue-quickstart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost-examples/vue-quickstart",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": true,
   "scripts": {
     "build": "vite build",

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @nhost/apollo
 
+## 5.0.3
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/nhost-js` version to 2.0.3
+- Updated dependencies [445d8ef4]
+  - @nhost/nhost-js@2.0.3
+
+## 5.0.2
+
+### Patch Changes
+
+- Updated dependencies [2d9145f9]
+  - @nhost/nhost-js@2.0.2
+
+## 5.0.1
+
+### Patch Changes
+
+- @nhost/nhost-js@2.0.1
+
+## 5.0.0
+
+### Patch Changes
+
+- Updated dependencies [c9d2d31a]
+- Updated dependencies [80bbd3a1]
+- Updated dependencies [80bbd3a1]
+- Updated dependencies [2949ff0f]
+  - @nhost/nhost-js@2.0.0
+
 ## 4.13.4
 
 ### Patch Changes

integrations/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "4.13.4",
+  "version": "5.0.3",
   "description": "Nhost Apollo Client library",
   "license": "MIT",
   "keywords": [

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @nhost/react-apollo
 
+## 5.0.4
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/react` to 2.0.3
+- 445d8ef4: chore(deps): bump `@nhost/apollo` to 5.0.3
+- Updated dependencies [445d8ef4]
+  - @nhost/apollo@5.0.3
+  - @nhost/react@2.0.3
+
+## 5.0.3
+
+### Patch Changes
+
+- @nhost/apollo@5.0.2
+- @nhost/react@2.0.2
+
+## 5.0.2
+
+### Patch Changes
+
+- @nhost/apollo@5.0.1
+- @nhost/react@2.0.1
+
+## 5.0.1
+
+### Patch Changes
+
+- Updated dependencies [19b11d40]
+- Updated dependencies [19b11d40]
+  - @nhost/react@2.0.0
+  - @nhost/apollo@5.0.0
+
 ## 4.13.5
 
 ### Patch Changes

integrations/react-apollo/package.json

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

integrations/react-urql/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @nhost/react-urql
 
+## 2.0.3
+
+### Patch Changes
+
+- 445d8ef4: chore(deps): bump `@nhost/react` to 2.0.3
+- Updated dependencies [445d8ef4]
+  - @nhost/react@2.0.3
+
+## 2.0.2
+
+### Patch Changes
+
+- @nhost/react@2.0.2
+
+## 2.0.1
+
+### Patch Changes
+
+- @nhost/react@2.0.1
+
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies [19b11d40]
+- Updated dependencies [19b11d40]
+  - @nhost/react@2.0.0
+
 ## 1.0.5
 
 ### Patch Changes

integrations/react-urql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-urql",
-  "version": "1.0.5",
+  "version": "2.0.3",
   "description": "Nhost React URQL client",
   "license": "MIT",
   "keywords": [

packages/graphql-js/.eslintrc.js

@@ -0,0 +1,9 @@
+const base = require('../../config/.eslintrc.js')
+module.exports = {
+  ...base,
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname
+  },
+  ignorePatterns: [...base.ignorePatterns, 'functions/**/*.ts']
+}

packages/graphql-js/CHANGELOG.md

@@ -0,0 +1,14 @@
+# @nhost/graphql-js
+
+## 0.0.3
+
+### Patch Changes
+
+- 2d9145f9: chore(deps): revert GraphQL client
+
+## 0.0.2
+
+### Patch Changes
+
+- 2200a0ed: Correct type inference on snake case operations
+- 3b48a627: Improve readme instructions

packages/graphql-js/README.md

@@ -0,0 +1,16 @@
+<h1 align="center">@nhost/graphql-js</h1>
+<h2 align="center">Nhost GraphQL client</h2>
+
+<p align="center">
+  <img alt="npm" src="https://img.shields.io/npm/v/@nhost/graphql-js">
+  <img alt="npm" src="https://img.shields.io/npm/dm/@nhost/graphql-js">
+  <a href="LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-yellow.svg" alt="license: MIT" />
+  </a>
+</p>
+
+Nhost GraphQL client.
+
+## Documentation
+
+[https://docs.nhost.io/reference/javascript/graphql](https://docs.nhost.io/reference/javascript/graphql)

packages/graphql-js/graphql.docgen.json

@@ -0,0 +1,10 @@
+{
+  "title": "GraphQL",
+  "path": "./.docgen/graphql.json",
+  "output": "../../docs/docs/reference/docgen/javascript/graphql",
+  "root": "reference/docgen/javascript/graphql",
+  "slug": "/reference/javascript/graphql",
+  "sidebarConfig": "referenceSidebar",
+  "baseEditUrl": "https://github.com/nhost/nhost/edit/main/packages",
+  "cleanup": true
+}

packages/graphql-js/graphql.typedoc.json

@@ -7,8 +7,8 @@
   "sort": [
     "source-order"
   ],
-  "json": "./.docgen/nhost-js.json",
-  "name": "Nhost JS",
+  "json": "./.docgen/graphql.json",
+  "name": "GraphQL",
   "readme": "none",
   "githubPages": false,
   "cleanOutputDir": false,
@@ -26,6 +26,9 @@
       "@nhost/hasura-storage-js": [
         "../hasura-storage-js/src/index.ts"
       ],
+      "@nhost/graphql-js": [
+        "../graphql-js/src/index.ts"
+      ],
       "@nhost/nextjs": [
         "../nextjs/src/index.ts"
       ],

packages/graphql-js/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@nhost/graphql-js",
+  "version": "0.0.3",
+  "description": "Nhost GraphQL client",
+  "license": "MIT",
+  "keywords": [
+    "nhost",
+    "hasura",
+    "graphql"
+  ],
+  "author": "Nhost",
+  "homepage": "https://nhost.io",
+  "bugs": "https://github.com/nhost/nhost/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nhost/nhost.git"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "umd",
+    "README.md"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "node": "./dist/index.cjs.js",
+        "default": "./dist/index.esm.js"
+      },
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite build",
+    "build": "run-p build:lib build:umd",
+    "build:lib": "vite build",
+    "build:umd": "vite build --config ../../config/vite.lib.umd.config.js",
+    "prettier": "prettier --check src/",
+    "prettier:fix": "prettier --write src/",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "verify": "run-p prettier lint",
+    "verify:fix": "run-p prettier:fix lint:fix",
+    "typedoc": "typedoc --options ./graphql.typedoc.json --tsconfig ./typedoc.tsconfig.json",
+    "docgen": "pnpm typedoc && docgen --config ./graphql.docgen.json"
+  },
+  "dependencies": {
+    "@graphql-typed-document-node/core": "^3.1.1",
+    "cross-fetch": "^3.1.5"
+  },
+  "peerDependencies": {
+    "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"
+  },
+  "devDependencies": {
+    "@nhost/docgen": "workspace:*",
+    "graphql": "16.6.0"
+  }
+}

packages/graphql-js/src/client.ts

@@ -0,0 +1,205 @@
+import { TypedDocumentNode } from '@graphql-typed-document-node/core'
+import fetch from 'cross-fetch'
+import { parseRequestArgs } from './parse-args'
+import { resolveRequestDocument } from './resolve-request-document'
+import {
+  NhostGraphqlConstructorParams,
+  NhostGraphqlRequestConfig,
+  NhostGraphqlRequestResponse,
+  RemoveIndex,
+  RequestDocument,
+  RequestOptions,
+  Variables
+} from './types'
+
+/**
+ * @alias GraphQL
+ */
+export class NhostGraphqlClient {
+  readonly _url: string
+  private accessToken: string | null
+  private adminSecret?: string
+
+  constructor(params: NhostGraphqlConstructorParams) {
+    const { url, adminSecret } = params
+
+    this._url = url
+    this.accessToken = null
+    this.adminSecret = adminSecret
+  }
+
+  /**
+   * Use `nhost.graphql.request` to send a GraphQL request. For more serious GraphQL usage we recommend using a GraphQL client such as Apollo Client (https://www.apollographql.com/docs/react).
+   *
+   * @example
+   * ```ts
+   * const CUSTOMERS = gql`
+   *  query {
+   *   customers {
+   *    id
+   *    name
+   *  }
+   * }
+   * `
+   * const { data, error } = await nhost.graphql.request(CUSTOMERS)
+   * ```
+   *
+   * @docs https://docs.nhost.io/reference/javascript/graphql/request
+   */
+  request<T = any, V = Variables>(
+    document: RequestDocument | TypedDocumentNode<T, V>,
+    ...variablesAndRequestHeaders: V extends Record<any, never>
+      ? [variables?: V, config?: NhostGraphqlRequestConfig]
+      : keyof RemoveIndex<V> extends never
+      ? [variables?: V, config?: NhostGraphqlRequestConfig]
+      : [variables: V, config?: NhostGraphqlRequestConfig]
+  ): Promise<NhostGraphqlRequestResponse<T>>
+  async request<T = any, V extends Variables = Variables>(
+    options: RequestOptions<V, T>
+  ): Promise<NhostGraphqlRequestResponse<T>>
+  async request<T = any, V extends Variables = Variables>(
+    documentOrOptions: RequestDocument | TypedDocumentNode<T, V> | RequestOptions<V>,
+    ...variablesAndRequestHeaders: V extends Record<any, never>
+      ? [variables?: V, config?: NhostGraphqlRequestConfig]
+      : keyof RemoveIndex<V> extends never
+      ? [variables?: V, config?: NhostGraphqlRequestConfig]
+      : [variables: V, config?: NhostGraphqlRequestConfig]
+  ): Promise<NhostGraphqlRequestResponse<T>> {
+    const [variables, config] = variablesAndRequestHeaders
+    const requestOptions = parseRequestArgs(documentOrOptions, variables, config)
+
+    const { headers, ...otherOptions } = config || {}
+    const { query, operationName } = resolveRequestDocument(requestOptions.document)
+    try {
+      const response = await fetch(this.httpUrl, {
+        method: 'POST',
+        body: JSON.stringify({
+          operationName,
+          query,
+          variables
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+          ...this.generateAccessTokenHeaders(),
+          ...headers
+        },
+        ...otherOptions
+      })
+      if (!response.ok) {
+        return {
+          data: null,
+          error: {
+            error: response.statusText,
+            message: response.statusText,
+            status: response.status
+          }
+        }
+      }
+      const { data, errors } = await response.json()
+
+      if (errors) {
+        return {
+          data: null,
+          error: errors
+        }
+      }
+      if (typeof data !== 'object' || Array.isArray(data) || data === null) {
+        return {
+          data: null,
+          error: {
+            error: 'invalid-response',
+            message: 'incorrect response data from GraphQL server',
+            status: 0
+          }
+        }
+      }
+
+      return { data, error: null }
+    } catch (e) {
+      const error = e as Error
+      return {
+        data: null,
+        error: {
+          message: error.message,
+          status: error.name === 'AbortError' ? 0 : 500,
+          error: error.name === 'AbortError' ? 'abort-error' : 'unknown'
+        }
+      }
+    }
+  }
+
+  /**
+   * Use `nhost.graphql.httpUrl` to get the GraphQL HTTP URL.
+   * @example
+   * ```ts
+   * const url = nhost.graphql.httpUrl;
+   * ```
+   *
+   * @docs https://docs.nhost.io/reference/javascript/graphql/get-http-url
+   */
+  get httpUrl(): string {
+    return this._url
+  }
+
+  /**
+   * Use `nhost.graphql.wsUrl` to get the GraphQL WebSocket URL.
+   * @example
+   * ```ts
+   * const url = nhost.graphql.wsUrl;
+   * ```
+   *
+   * @docs https://docs.nhost.io/reference/javascript/graphql/get-ws-url
+   */
+  get wsUrl(): string {
+    return this._url.replace(/^(http)(s?):\/\//, 'ws$2://')
+  }
+
+  /**
+   * Use `nhost.graphql.url` to get the GraphQL URL.
+   * @deprecated Use `nhost.graphql.httpUrl` and `nhost.graphql.wsUrl` instead.
+   */
+  get url(): string {
+    return this._url
+  }
+
+  /**
+   * Use `nhost.graphql.getUrl()` to get the GraphQL URL.
+   * @deprecated Use `nhost.graphql.httpUrl` and `nhost.graphql.wsUrl` instead.
+   */
+  getUrl(): string {
+    return this._url
+  }
+
+  /**
+   * Use `nhost.graphql.setAccessToken` to a set an access token to be used in subsequent graphql requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
+   *
+   * @example
+   * ```ts
+   * nhost.graphql.setAccessToken('some-access-token')
+   * ```
+   *
+   * @docs https://docs.nhost.io/reference/javascript/graphql/set-access-token
+   */
+  setAccessToken(accessToken: string | undefined) {
+    if (!accessToken) {
+      this.accessToken = null
+      return
+    }
+
+    this.accessToken = accessToken
+  }
+
+  private generateAccessTokenHeaders(): NhostGraphqlRequestConfig['headers'] {
+    if (this.adminSecret) {
+      return {
+        'x-hasura-admin-secret': this.adminSecret
+      }
+    }
+    if (this.accessToken) {
+      return {
+        Authorization: `Bearer ${this.accessToken}`
+      }
+    }
+    return {}
+  }
+}

packages/graphql-js/src/index.ts

@@ -0,0 +1 @@
+export * from './client'

packages/graphql-js/src/parse-args.ts

@@ -0,0 +1,17 @@
+import { RequestDocument, RequestOptions, Variables } from './types'
+
+export function parseRequestArgs<V extends Variables = Variables>(
+  documentOrOptions: RequestDocument | RequestOptions<V>,
+  variables?: V,
+  config?: RequestInit
+): RequestOptions<V> {
+  return (
+    (documentOrOptions as RequestOptions<V>).document
+      ? documentOrOptions
+      : {
+          document: documentOrOptions,
+          variables,
+          config
+        }
+  ) as RequestOptions<V>
+}

packages/graphql-js/src/resolve-request-document.ts

@@ -0,0 +1,42 @@
+import { DocumentNode, OperationDefinitionNode, parse, print } from 'graphql'
+import { RequestDocument } from './types'
+
+/**
+ * helpers
+ */
+
+function extractOperationName(document: DocumentNode): string | undefined {
+  let operationName = undefined
+
+  const operationDefinitions = document.definitions.filter(
+    (definition) => definition.kind === 'OperationDefinition'
+  ) as OperationDefinitionNode[]
+
+  if (operationDefinitions.length === 1) {
+    operationName = operationDefinitions[0].name?.value
+  }
+
+  return operationName
+}
+
+export function resolveRequestDocument(document: RequestDocument): {
+  query: string
+  operationName?: string
+} {
+  if (typeof document === 'string') {
+    let operationName = undefined
+
+    try {
+      const parsedDocument = parse(document)
+      operationName = extractOperationName(parsedDocument)
+    } catch (err) {
+      // Failed parsing the document, the operationName will be undefined
+    }
+
+    return { query: document, operationName }
+  }
+
+  const operationName = extractOperationName(document)
+
+  return { query: print(document), operationName }
+}

packages/graphql-js/src/types.ts

@@ -0,0 +1,52 @@
+import { TypedDocumentNode } from '@graphql-typed-document-node/core'
+import { DocumentNode, GraphQLError } from 'graphql'
+
+// TODO shared with other packages
+export type ErrorPayload = {
+  error: string
+  status: number
+  message: string
+}
+
+export type RequestOptions<V extends Variables = Variables, T = any> = NhostGraphqlRequestConfig & {
+  document: RequestDocument | TypedDocumentNode<T, V>
+} & (V extends Record<any, never>
+    ? { variables?: V }
+    : keyof RemoveIndex<V> extends never
+    ? { variables?: V }
+    : { variables: V })
+export type Variables = { [key: string]: any }
+
+export type RequestDocument = string | DocumentNode
+
+export type RemoveIndex<T> = {
+  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K]
+}
+
+export interface NhostGraphqlConstructorParams {
+  /**
+   * GraphQL endpoint.
+   */
+  url: string
+  /**
+   * Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests.
+   */
+  adminSecret?: string
+}
+
+export type NhostGraphqlRequestResponse<T = unknown> =
+  | {
+      data: null
+      error: GraphQLError[] | ErrorPayload
+    }
+  | {
+      data: T
+      error: null
+    }
+
+/** Subset of RequestInit parameters that are supported by the graphql client */
+export interface NhostGraphqlRequestConfig {
+  headers?: Record<string, string>
+  /** @deprecated Axios has been replaced by cross-fetch. You should now remove this option. */
+  useAxios?: false
+}

packages/graphql-js/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../config/tsconfig.base.json",
+  "include": ["src"]
+}

packages/graphql-js/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "include": [
+    "tests/types"
+  ]
+}

packages/graphql-js/vite.config.e2e.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+import baseConfig from '../../config/vite.lib.config'
+
+export default defineConfig({
+  ...baseConfig,
+  test: {
+    ...(baseConfig.test || {}),
+    include: [`tests/e2e/**/*.{spec,test}.{ts,tsx}`],
+    testTimeout: 30000,
+    environment: 'node'
+  }
+})

packages/graphql-js/vite.config.js

@@ -0,0 +1,5 @@
+import { defineConfig } from 'vite'
+
+import baseConfig from '../../config/vite.lib.config'
+
+export default defineConfig(baseConfig)

packages/graphql-js/vite.config.unit.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+import baseConfig from '../../config/vite.lib.config'
+
+export default defineConfig({
+  ...baseConfig,
+  test: {
+    ...(baseConfig.test || {}),
+    include: [`tests/unit/**/*.{spec,test}.{ts,tsx}`],
+    testTimeout: 30000,
+    environment: 'node'
+  }
+})

packages/hasura-auth-js/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @nhost/hasura-auth-js
 
+## 2.0.0
+
+### Major Changes
+
+- 19b11d40: Remove the deprecated `AuthCookieClient` and `AuthClientSSR` constructors
+
+  Use the `clientStorageType` option instead:
+
+  ```ts
+  const nhost = new NhostClient({ clientStorageType: 'cookie' })
+  ```
+
+- 19b11d40: Remove the deprecated `nhost.auth.getJWTToken` method
+
+  Use `nhost.auth.getAccessToken()` instead.
+
+- 19b11d40: Remove the deprecated `autoLogin` option
+
+  Use `autoSignIn` instead:
+
+  ```ts
+  const nhost = new NhostClient({ autoSignIn: true })
+  ```
+
+- 19b11d40: Remove the deprecated `clientStorageGetter` and `clientStorageSetter` options
+
+  Use `clientStorageType` and `clientStorage` instead:
+
+  ```ts
+  const nhost = new NhostClient({ clientStorageType: 'custom', clientStorage: TODO })
+  ```
+
+### Minor Changes
+
+- 80bbd3a1: Replace `axios` by `cross-fetch`
+
 ## 1.12.4
 
 ### Patch Changes

packages/hasura-auth-js/e2e/email.test.ts

@@ -1,7 +1,6 @@
 import { faker } from '@faker-js/faker'
-import axios from 'axios'
+import fetch from 'cross-fetch'
 import { afterEach, describe, expect, it } from 'vitest'
-
 import { auth, getHtmlLink, mailhog } from './helpers'
 
 describe('emails', () => {
@@ -22,10 +21,11 @@ describe('emails', () => {
     const verifyEmailLink = await getHtmlLink(email, 'verifyEmail')
 
     // verify email
-    await axios.get(verifyEmailLink, {
-      maxRedirects: 0,
-      validateStatus: (status) => status === 302
-    })
+    try {
+      await fetch(verifyEmailLink, { method: 'GET', redirect: 'follow' })
+    } catch {
+      // ignore
+    }
 
     const signInA = await auth.signIn({
       email,
@@ -46,10 +46,11 @@ describe('emails', () => {
     const changeEmailLink = await getHtmlLink(email, 'emailConfirmChange')
 
     // verify email
-    await axios.get(changeEmailLink, {
-      maxRedirects: 0,
-      validateStatus: (status) => status === 302
-    })
+    try {
+      await fetch(changeEmailLink, { method: 'GET', redirect: 'follow' })
+    } catch {
+      // ignore
+    }
   })
 
   it('reset email verification', async () => {
@@ -71,28 +72,21 @@ describe('emails', () => {
     expect(signInA.error).toBeTruthy()
     expect(signInA.session).toBeNull()
 
-    await mailhog.deleteAll()
-
     await auth.sendVerificationEmail({ email })
 
-    // make sure onle a single message exists
-    const messages = await mailhog.messages()
-
-    if (!messages) {
-      throw new Error('no messages')
-    }
-
-    expect(messages.count).toBe(1)
+    const message = await mailhog.latestTo(email)
+    expect(message?.subject).toBe('Verify your email')
 
     // test email link
     // get verify email link
     const verifyEmailLink = await getHtmlLink(email, 'verifyEmail')
 
     // verify email
-    await axios.get(verifyEmailLink, {
-      maxRedirects: 0,
-      validateStatus: (status) => status === 302
-    })
+    try {
+      await fetch(verifyEmailLink, { method: 'GET', redirect: 'follow' })
+    } catch {
+      // ignore
+    }
 
     // sign in should work
     const signInB = await auth.signIn({

packages/hasura-auth-js/e2e/helpers.ts

@@ -1,8 +1,7 @@
-import axios from 'axios'
 import { load } from 'cheerio'
+import fetch from 'cross-fetch'
 import createMailhogClient from 'mailhog'
 import { expect } from 'vitest'
-
 import { HasuraAuthClient, SignUpParams } from '../src'
 
 const AUTH_BACKEND_URL = 'http://localhost:1337/v1/auth'
@@ -43,11 +42,11 @@ export const signUpAndVerifyUser = async (params: SignUpParams) => {
   // get verify email link
   const verifyEmailLink = await getHtmlLink(email, 'verifyEmail')
 
-  // verify email
-  await axios.get(verifyEmailLink, {
-    maxRedirects: 0,
-    validateStatus: (status) => status === 302
-  })
+  try {
+    await fetch(verifyEmailLink, { method: 'GET', redirect: 'follow' })
+  } catch {
+    // ignore
+  }
 }
 
 export const signUpAndInUser = async (params: SignUpParams) => {
@@ -60,10 +59,11 @@ export const signUpAndInUser = async (params: SignUpParams) => {
   const verifyEmailLink = await getHtmlLink(email, 'verifyEmail')
 
   // verify email
-  await axios.get(verifyEmailLink, {
-    maxRedirects: 0,
-    validateStatus: (status) => status === 302
-  })
+  try {
+    await fetch(verifyEmailLink, { method: 'GET', redirect: 'follow' })
+  } catch {
+    // ignore
+  }
 
   // sign in
   const { session, error } = await auth.signIn({ email, password })

packages/hasura-auth-js/e2e/password.test.ts

@@ -1,7 +1,6 @@
 import { faker } from '@faker-js/faker'
-import axios from 'axios'
+import fetch from 'cross-fetch'
 import { afterEach, describe, expect, it } from 'vitest'
-
 import { auth, getHtmlLink, signUpAndInUser, signUpAndVerifyUser } from './helpers'
 
 describe('passwords', () => {
@@ -48,9 +47,10 @@ describe('passwords', () => {
     const resetPasswordLink = await getHtmlLink(email, 'passwordReset')
 
     // verify email
-    await axios.get(resetPasswordLink, {
-      maxRedirects: 0,
-      validateStatus: (status) => status === 302
-    })
+    try {
+      await fetch(resetPasswordLink, { method: 'GET', redirect: 'follow' })
+    } catch {
+      // ignore
+    }
   })
 })

packages/hasura-auth-js/e2e/sign-in.test.ts

@@ -1,8 +1,7 @@
 import { faker } from '@faker-js/faker'
-import axios from 'axios'
+import fetch from 'cross-fetch'
 import { afterEach, describe, expect, it } from 'vitest'
 import { USER_ALREADY_SIGNED_IN } from '../src'
-
 import { auth, getHtmlLink, signUpAndInUser, signUpAndVerifyUser } from './helpers'
 
 describe('sign-in', () => {
@@ -57,10 +56,11 @@ describe('sign-in', () => {
     const emailLink = await getHtmlLink(email, 'signinPasswordless')
 
     // verify email
-    await axios.get(emailLink, {
-      maxRedirects: 0,
-      validateStatus: (status) => status === 302
-    })
+    try {
+      await fetch(emailLink, { method: 'GET', redirect: 'follow' })
+    } catch {
+      // ignore
+    }
   })
 
   it('should not be possible to sign in with email+password in when already authenticated', async () => {

packages/hasura-auth-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/hasura-auth-js",
-  "version": "1.12.4",
+  "version": "2.0.0",
   "description": "Hasura-auth client",
   "license": "MIT",
   "keywords": [
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@simplewebauthn/browser": "^6.0.0",
-    "axios": "^1.2.0",
+    "cross-fetch": "^3.1.5",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^3.1.2",
     "xstate": "^4.33.5"

packages/hasura-auth-js/src/hasura-auth-client.ts

@@ -75,11 +75,8 @@ export class HasuraAuthClient {
     url,
     autoRefreshToken = true,
     autoSignIn = true,
-    autoLogin,
     clientStorage,
     clientStorageType,
-    clientStorageGetter,
-    clientStorageSetter,
     refreshIntervalTime,
     start = true
   }: NhostAuthConstructorParams) {
@@ -88,12 +85,10 @@ export class HasuraAuthClient {
       backendUrl: url,
       clientUrl: (typeof window !== 'undefined' && window.location?.origin) || '',
       autoRefreshToken,
-      autoSignIn: typeof autoLogin === 'boolean' ? autoLogin : autoSignIn,
+      autoSignIn,
       start,
       clientStorage,
       clientStorageType,
-      clientStorageGetter,
-      clientStorageSetter,
       refreshIntervalTime
     })
   }
@@ -552,16 +547,6 @@ export class HasuraAuthClient {
     return { isAuthenticated: this.isAuthenticated(), isLoading: false, connectionAttempts }
   }
 
-  /**
-   * @internal
-   * @deprecated Use `nhost.auth.getAccessToken()` instead.
-   * @docs https://docs.nhost.io/reference/javascript/auth/get-access-token
-   */
-
-  getJWTToken(): string | undefined {
-    return this.getAccessToken()
-  }
-
   /**
    * Use `nhost.auth.getAccessToken` to get the access token of the user.
    *

packages/hasura-auth-js/src/machines/authentication/machine.ts

@@ -5,7 +5,6 @@ import type {
   PublicKeyCredentialRequestOptionsJSON,
   RegistrationCredentialJSON
 } from '@simplewebauthn/typescript-types'
-import type { AxiosRequestConfig } from 'axios'
 import { assign, createMachine, InterpreterFrom, send } from 'xstate'
 import {
   NHOST_JWT_EXPIRES_AT_KEY,
@@ -42,16 +41,14 @@ import {
 } from '../../types'
 import {
   getParameterByName,
-  nhostApiClient,
-  removeParameterFromWindow,
-  rewriteRedirectTo
-} from '../../utils'
-import {
   isValidEmail,
   isValidPassword,
   isValidPhoneNumber,
-  isValidTicket
-} from '../../utils/validators'
+  isValidTicket,
+  postFetch,
+  removeParameterFromWindow,
+  rewriteRedirectTo
+} from '../../utils'
 import { AuthContext, INITIAL_MACHINE_CONTEXT } from './context'
 import { AuthEvents } from './events'
 
@@ -81,23 +78,20 @@ type AuthServices = {
 export const createAuthMachine = ({
   backendUrl,
   clientUrl,
-  clientStorageGetter,
-  clientStorageSetter,
   clientStorageType = 'web',
   clientStorage,
   refreshIntervalTime,
   autoRefreshToken = true,
   autoSignIn = true
 }: AuthMachineOptions) => {
-  const storageGetter = clientStorageGetter || localStorageGetter(clientStorageType, clientStorage)
-  const storageSetter = clientStorageSetter || localStorageSetter(clientStorageType, clientStorage)
-  const api = nhostApiClient(backendUrl)
+  const storageGetter = localStorageGetter(clientStorageType, clientStorage)
+  const storageSetter = localStorageSetter(clientStorageType, clientStorage)
   const postRequest = async <T = any, D = any>(
     url: string,
     data?: D,
-    config?: AxiosRequestConfig<D>
+    token?: string | null
   ): Promise<T> => {
-    const result = await api.post(url, data, config)
+    const result = await postFetch<T>(`${backendUrl}${url}`, data, token)
 
     return result.data
   }
@@ -704,11 +698,7 @@ export const createAuthMachine = ({
                 phoneNumber,
                 options: rewriteRedirectTo(clientUrl, options)
               },
-              {
-                headers: {
-                  authorization: `Bearer ${context.accessToken.value}`
-                }
-              }
+              context.accessToken.value
             )
           } else {
             return postRequest('/signin/passwordless/sms', {
@@ -739,11 +729,7 @@ export const createAuthMachine = ({
                 email,
                 options: rewriteRedirectTo(clientUrl, options)
               },
-              {
-                headers: {
-                  authorization: `Bearer ${context.accessToken.value}`
-                }
-              }
+              context.accessToken.value
             )
           } else {
             return postRequest('/signin/passwordless/email', {
@@ -811,11 +797,7 @@ export const createAuthMachine = ({
                 password,
                 options: rewriteRedirectTo(clientUrl, options)
               },
-              {
-                headers: {
-                  authorization: `Bearer ${context.accessToken.value}`
-                }
-              }
+              context.accessToken.value
             )
           } else {
             return postRequest<SignUpResponse>('/signup/email-password', {

packages/hasura-auth-js/src/machines/change-email.ts

@@ -1,9 +1,8 @@
 import { assign, createMachine, send } from 'xstate'
-
 import { INVALID_EMAIL_ERROR } from '../errors'
 import { AuthClient } from '../internal-client'
 import { ChangeEmailOptions, ChangeEmailResponse, ErrorPayload } from '../types'
-import { nhostApiClient, rewriteRedirectTo } from '../utils'
+import { postFetch, rewriteRedirectTo } from '../utils'
 import { isValidEmail } from '../utils/validators'
 
 export type ChangeEmailContext = {
@@ -26,7 +25,6 @@ export type ChangeEmailServices = {
 export type ChangeEmailMachine = ReturnType<typeof createChangeEmailMachine>
 
 export const createChangeEmailMachine = ({ backendUrl, clientUrl, interpreter }: AuthClient) => {
-  const api = nhostApiClient(backendUrl)
   return createMachine(
     {
       schema: {
@@ -86,17 +84,10 @@ export const createChangeEmailMachine = ({ backendUrl, clientUrl, interpreter }:
       },
       services: {
         requestChange: async (_, { email, options }) => {
-          const res = await api.post(
-            '/user/email/change',
-            {
-              newEmail: email,
-              options: rewriteRedirectTo(clientUrl, options)
-            },
-            {
-              headers: {
-                authorization: `Bearer ${interpreter?.getSnapshot().context.accessToken.value}`
-              }
-            }
+          const res = await postFetch(
+            `${backendUrl}/user/email/change`,
+            { newEmail: email, options: rewriteRedirectTo(clientUrl, options) },
+            interpreter?.getSnapshot().context.accessToken.value
           )
           return res.data
         }

packages/hasura-auth-js/src/machines/change-password.ts

@@ -1,9 +1,8 @@
 import { assign, createMachine, send } from 'xstate'
-
 import { INVALID_PASSWORD_ERROR } from '../errors'
 import { AuthClient } from '../internal-client'
 import { ChangePasswordResponse, ErrorPayload } from '../types'
-import { nhostApiClient } from '../utils'
+import { postFetch } from '../utils'
 import { isValidPassword } from '../utils/validators'
 
 export type ChangePasswordContext = {
@@ -25,7 +24,6 @@ export type ChangePasswordServices = {
 export type ChangePasswordMachine = ReturnType<typeof createChangePasswordMachine>
 
 export const createChangePasswordMachine = ({ backendUrl, interpreter }: AuthClient) => {
-  const api = nhostApiClient(backendUrl)
   return createMachine(
     {
       schema: {
@@ -84,14 +82,10 @@ export const createChangePasswordMachine = ({ backendUrl, interpreter }: AuthCli
       },
       services: {
         requestChange: (_, { password, ticket }) =>
-          api.post<string, ChangePasswordResponse>(
-            '/user/password',
+          postFetch<ChangePasswordResponse>(
+            `${backendUrl}/user/password`,
             { newPassword: password, ticket: ticket },
-            {
-              headers: {
-                authorization: `Bearer ${interpreter?.getSnapshot().context.accessToken.value}`
-              }
-            }
+            interpreter?.getSnapshot().context.accessToken.value
           )
       }
     }

packages/hasura-auth-js/src/machines/enable-mfa.ts

@@ -1,9 +1,8 @@
 import { assign, createMachine, send } from 'xstate'
-
 import { INVALID_MFA_CODE_ERROR, INVALID_MFA_TYPE_ERROR } from '../errors'
 import { AuthClient } from '../internal-client'
 import { ErrorPayload } from '../types'
-import { nhostApiClient } from '../utils'
+import { getFetch, postFetch } from '../utils'
 
 export type EnableMfaContext = {
   error: ErrorPayload | null
@@ -28,7 +27,6 @@ export type EnableMfaEvents =
 export type EnableMfadMachine = ReturnType<typeof createEnableMfaMachine>
 
 export const createEnableMfaMachine = ({ backendUrl, interpreter }: AuthClient) => {
-  const api = nhostApiClient(backendUrl)
   return createMachine(
     {
       schema: {
@@ -107,7 +105,10 @@ export const createEnableMfaMachine = ({ backendUrl, interpreter }: AuthClient)
           imageUrl: (_, { data: { imageUrl } }: any) => imageUrl,
           secret: (_, { data: { totpSecret } }: any) => totpSecret
         }),
-        reportError: send((ctx) => ({ type: 'ERROR', error: ctx.error })),
+        reportError: send((ctx, event) => {
+          console.log('REPORT', ctx, event)
+          return { type: 'ERROR', error: ctx.error }
+        }),
         reportSuccess: send('SUCCESS'),
         reportGeneratedSuccess: send('GENERATED'),
         reportGeneratedError: send((ctx) => ({ type: 'GENERATED_ERROR', error: ctx.error }))
@@ -118,25 +119,17 @@ export const createEnableMfaMachine = ({ backendUrl, interpreter }: AuthClient)
       },
       services: {
         generate: async (_) => {
-          const { data } = await api.get('/mfa/totp/generate', {
-            headers: {
-              authorization: `Bearer ${interpreter?.getSnapshot().context.accessToken.value}`
-            }
-          })
+          const { data } = await getFetch(
+            `${backendUrl}/mfa/totp/generate`,
+            interpreter?.getSnapshot().context.accessToken.value
+          )
           return data
         },
         activate: (_, { code, activeMfaType }) =>
-          api.post(
-            '/user/mfa',
-            {
-              code,
-              activeMfaType
-            },
-            {
-              headers: {
-                authorization: `Bearer ${interpreter?.getSnapshot().context.accessToken.value}`
-              }
-            }
+          postFetch(
+            `${backendUrl}/user/mfa`,
+            { code, activeMfaType },
+            interpreter?.getSnapshot().context.accessToken.value
           )
       }
     }

packages/hasura-auth-js/src/machines/reset-password.ts

@@ -1,9 +1,8 @@
 import { assign, createMachine, send } from 'xstate'
-
 import { INVALID_EMAIL_ERROR } from '../errors'
 import { AuthClient } from '../internal-client'
 import { ErrorPayload, ResetPasswordOptions, ResetPasswordResponse } from '../types'
-import { nhostApiClient, rewriteRedirectTo } from '../utils'
+import { postFetch, rewriteRedirectTo } from '../utils'
 import { isValidEmail } from '../utils/validators'
 
 export type ResetPasswordContext = {
@@ -25,7 +24,6 @@ export type ResetPasswordServices = {
 export type ResetPasswordMachine = ReturnType<typeof createResetPasswordMachine>
 
 export const createResetPasswordMachine = ({ backendUrl, clientUrl }: AuthClient) => {
-  const api = nhostApiClient(backendUrl)
   return createMachine(
     {
       schema: {
@@ -84,7 +82,7 @@ export const createResetPasswordMachine = ({ backendUrl, clientUrl }: AuthClient
       },
       services: {
         requestChange: (_, { email, options }) =>
-          api.post<string, ResetPasswordResponse>('/user/password/reset', {
+          postFetch<ResetPasswordResponse>(`${backendUrl}/user/password/reset`, {
             email,
             options: rewriteRedirectTo(clientUrl, options)
           })

packages/hasura-auth-js/src/machines/send-verification-email.ts

@@ -1,9 +1,8 @@
 import { assign, createMachine, send } from 'xstate'
-
 import { INVALID_EMAIL_ERROR } from '../errors'
 import { AuthClient } from '../internal-client'
 import { ErrorPayload, SendVerificationEmailOptions, SendVerificationEmailResponse } from '../types'
-import { nhostApiClient, rewriteRedirectTo } from '../utils'
+import { postFetch, rewriteRedirectTo } from '../utils'
 import { isValidEmail } from '../utils/validators'
 
 export type SendVerificationEmailContext = {
@@ -25,7 +24,6 @@ export type SendVerificationEmailServices = {
 
 export type SendVerificationEmailMachine = ReturnType<typeof createSendVerificationEmailMachine>
 export const createSendVerificationEmailMachine = ({ backendUrl, clientUrl }: AuthClient) => {
-  const api = nhostApiClient(backendUrl)
   return createMachine(
     {
       schema: {
@@ -84,12 +82,9 @@ export const createSendVerificationEmailMachine = ({ backendUrl, clientUrl }: Au
       },
       services: {
         request: async (_, { email, options }) => {
-          const res = await api.post<SendVerificationEmailResponse>(
-            '/user/email/send-verification-email',
-            {
-              email,
-              options: rewriteRedirectTo(clientUrl, options)
-            }
+          const res = await postFetch<SendVerificationEmailResponse>(
+            `${backendUrl}/user/email/send-verification-email`,
+            { email, options: rewriteRedirectTo(clientUrl, options) }
           )
           return res.data
         }

packages/hasura-auth-js/src/promises/addSecurityKey.ts

@@ -3,13 +3,12 @@ import {
   PublicKeyCredentialCreationOptionsJSON,
   RegistrationCredentialJSON
 } from '@simplewebauthn/typescript-types'
-
+import { postFetch } from '..'
 import { CodifiedError } from '../errors'
 import { AuthClient } from '../internal-client'
 import { ErrorPayload, SecurityKey } from '../types'
-import { nhostApiClient } from '../utils'
-
 import { ActionErrorState, ActionLoadingState, ActionSuccessState } from './types'
+
 export interface AddSecurityKeyHandlerResult extends ActionErrorState, ActionSuccessState {
   key?: SecurityKey
 }
@@ -20,16 +19,11 @@ export const addSecurityKeyPromise = async (
   { backendUrl, interpreter }: AuthClient,
   nickname?: string
 ): Promise<AddSecurityKeyHandlerResult> => {
-  const api = nhostApiClient(backendUrl)
   try {
-    const { data: options } = await api.post<PublicKeyCredentialCreationOptionsJSON>(
+    const { data: options } = await postFetch<PublicKeyCredentialCreationOptionsJSON>(
       '/user/webauthn/add',
       {},
-      {
-        headers: {
-          authorization: `Bearer ${interpreter?.getSnapshot().context.accessToken.value}`
-        }
-      }
+      interpreter?.getSnapshot().context.accessToken.value
     )
     let credential: RegistrationCredentialJSON
     try {
@@ -37,14 +31,10 @@ export const addSecurityKeyPromise = async (
     } catch (e) {
       throw new CodifiedError(e as Error)
     }
-    const { data: key } = await api.post<SecurityKey>(
-      '/user/webauthn/verify',
+    const { data: key } = await postFetch<SecurityKey>(
+      `${backendUrl}/user/webauthn/verify`,
       { credential, nickname },
-      {
-        headers: {
-          authorization: `Bearer ${interpreter?.getSnapshot().context.accessToken.value}`
-        }
-      }
+      interpreter?.getSnapshot().context.accessToken.value
     )
     return { key, isError: false, error: null, isSuccess: true }
   } catch (e) {

packages/hasura-auth-js/src/types/hasura-auth/responses.ts

@@ -1,7 +1,7 @@
 import { ErrorPayload, NhostSession } from './common'
 
 // Hasura-auth API response types
-interface NullableErrorResponse {
+export interface NullableErrorResponse {
   error: ErrorPayload | null
 }
 

packages/hasura-auth-js/src/utils/axios.ts

@@ -1,25 +0,0 @@
-import axios, { AxiosError } from 'axios'
-
-import { NETWORK_ERROR_CODE } from '../errors'
-import { ErrorPayload } from '../types'
-
-export const nhostApiClient = (backendUrl: string) => {
-  const client = axios.create({ baseURL: backendUrl })
-
-  client.interceptors.response.use(
-    (response) => response,
-    (error: AxiosError<{ message: string; error?: string; statusCode?: number }>) =>
-      Promise.reject<{ error: ErrorPayload }>({
-        error: {
-          message:
-            error.response?.data?.message ??
-            error.message ??
-            error.request.responseText ??
-            JSON.stringify(error),
-          status: error.response?.status ?? error.response?.data?.statusCode ?? NETWORK_ERROR_CODE,
-          error: error.response?.data?.error || error.request.statusText || 'network'
-        }
-      })
-  )
-  return client
-}

packages/hasura-auth-js/src/utils/fetch.ts

@@ -0,0 +1,58 @@
+import fetch from 'cross-fetch'
+import { NETWORK_ERROR_CODE } from '../errors'
+import { NullableErrorResponse } from '../types'
+
+interface FetcResponse<T> extends NullableErrorResponse {
+  data: T
+}
+
+const fetchWrapper = async <T>(
+  url: string,
+  method: 'GET' | 'POST',
+  { token, body }: { token?: string | null; body?: any } = {}
+): Promise<FetcResponse<T>> => {
+  const headers: HeadersInit = {
+    'Content-Type': 'application/json',
+    Accept: '*/*'
+  }
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`
+  }
+  const options: RequestInit = {
+    method,
+    headers
+  }
+  if (body) {
+    options.body = JSON.stringify(body)
+  }
+  try {
+    const result = await fetch(url, options)
+    if (!result.ok) {
+      const error = await result.json()
+      return Promise.reject<FetcResponse<T>>({ error })
+    }
+    try {
+      const data = await result.json()
+      return { data, error: null }
+    } catch {
+      console.warn(`Unexpected response: can't parse the response of the server at ${url}`)
+      return { data: 'OK' as any, error: null }
+    }
+  } catch (e) {
+    const error = {
+      message: 'Network Error',
+      status: NETWORK_ERROR_CODE,
+      error: 'network'
+    }
+    return Promise.reject<FetcResponse<T>>({ error })
+  }
+}
+
+export const postFetch = async <T>(
+  url: string,
+  body: any,
+  token?: string | null
+): Promise<FetcResponse<T>> => fetchWrapper<T>(url, 'POST', { token, body })
+
+export const getFetch = <T>(url: string, token?: string | null): Promise<FetcResponse<T>> =>
+  fetchWrapper<T>(url, 'GET', { token })

packages/hasura-auth-js/src/utils/index.ts

@@ -1,5 +1,5 @@
-export * from './axios'
 export * from './client-helpers'
 export * from './environment'
+export * from './fetch'
 export * from './url'
 export * from './validators'

packages/hasura-auth-js/tests/anonymousSignIn.test.ts

@@ -10,7 +10,6 @@ import {
   invalidDeamonymisationEmailError
 } from './helpers/handlers'
 import { fakeAnonymousUser } from './helpers/mocks/user'
-
 import server from './helpers/server'
 import CustomClientStorage from './helpers/storage'
 
@@ -51,7 +50,7 @@ describe('Anonymous Sign-in', () => {
     expect(state.context.errors).toMatchInlineSnapshot(`
     {
       "authentication": {
-        "error": "OK",
+        "error": "network",
         "message": "Network Error",
         "status": 0,
       },

packages/hasura-auth-js/tests/changeEmail.test.ts

@@ -61,7 +61,7 @@ test(`should fail if there is a network error`, async () => {
 
   expect(state.context.error).toMatchInlineSnapshot(`
     {
-      "error": "OK",
+      "error": "network",
       "message": "Network Error",
       "status": 0,
     }

packages/hasura-auth-js/tests/changePassword.test.ts

@@ -64,7 +64,7 @@ test(`should fail if there is a network error`, async () => {
 
   expect(state.context.error).toMatchInlineSnapshot(`
     {
-      "error": "OK",
+      "error": "network",
       "message": "Network Error",
       "status": 0,
     }

packages/hasura-auth-js/tests/emailPasswordSignUp.test.ts

@@ -54,7 +54,7 @@ test(`should fail if network is unavailable`, async () => {
   expect(state.context.errors).toMatchInlineSnapshot(`
     {
       "registration": {
-        "error": "OK",
+        "error": "network",
         "message": "Network Error",
         "status": 0,
       },

packages/hasura-auth-js/tests/enableMfa.test.ts

@@ -68,7 +68,7 @@ describe(`Generation`, () => {
 
     expect(state.context.error).toMatchInlineSnapshot(`
       {
-        "error": "OK",
+        "error": "network",
         "message": "Network Error",
         "status": 0,
       }

packages/hasura-auth-js/tests/helpers/handlers/anonymousHandlers.ts

@@ -53,7 +53,7 @@ export const correctAnonymousHandler = rest.post(
 export const deamonymisationSuccessfulHandler = rest.post(
   `${BASE_URL}/user/deanonymize`,
   (_req, res, ctx) => {
-    return res(ctx.status(200))
+    return res(ctx.status(200), ctx.json('OK'))
   }
 )
 

packages/hasura-auth-js/tests/helpers/handlers/changeEmailHandlers.ts

@@ -48,6 +48,6 @@ export const changeEmailUnauthorizedErrorHandler = rest.post(
 export const changeEmailSuccessHandler = rest.post(
   `${BASE_URL}/user/email/change`,
   (_req, res, ctx) => {
-    return res(ctx.status(200))
+    return res(ctx.status(200), ctx.json('OK'))
   }
 )

packages/hasura-auth-js/tests/helpers/handlers/changePasswordHandlers.ts

@@ -48,6 +48,6 @@ export const changePasswordUnauthorizedErrorHandler = rest.post(
 export const changePasswordSuccessHandler = rest.post(
   `${BASE_URL}/user/password`,
   (_req, res, ctx) => {
-    return res(ctx.status(200))
+    return res(ctx.status(200), ctx.json('OK'))
   }
 )

packages/hasura-auth-js/tests/helpers/handlers/enableMfaHandlers.ts

@@ -101,5 +101,5 @@ export const activateMfaTotpUnauthorizedErrorHandler = rest.post(
  * Request handler for MSW to mock an successful network request when activating MFA.
  */
 export const activateMfaTotpSuccessHandler = rest.post(`${BASE_URL}/user/mfa`, (_req, res, ctx) => {
-  return res(ctx.status(200))
+  return res(ctx.status(200), ctx.json('OK'))
 })

packages/hasura-auth-js/tests/helpers/handlers/passwordlessEmailSignInHandlers.ts

@@ -8,7 +8,7 @@ import { BASE_URL } from '../config'
 export const correctPasswordlessEmailHandler = rest.post(
   `${BASE_URL}/signin/passwordless/email`,
   (_req, res, ctx) => {
-    return res(ctx.status(200))
+    return res(ctx.status(200), ctx.json('OK'))
   }
 )
 

packages/hasura-auth-js/tests/helpers/handlers/passwordlessSmsSignInHandlers.ts

@@ -11,7 +11,7 @@ import fakeUser from '../mocks/user'
 export const correctPasswordlessSmsHandler = rest.post(
   `${BASE_URL}/signin/passwordless/sms`,
   (_req, res, ctx) => {
-    return res(ctx.status(200))
+    return res(ctx.status(200), ctx.json('OK'))
   }
 )
 

packages/hasura-auth-js/tests/helpers/handlers/resetPasswordHandlers.ts

@@ -64,6 +64,6 @@ export const resetPasswordUserNotFoundHandler = rest.post(
 export const resetPasswordSuccessHandler = rest.post(
   `${BASE_URL}/user/password/reset`,
   (_req, res, ctx) => {
-    return res(ctx.status(200))
+    return res(ctx.status(200), ctx.json('OK'))
   }
 )