@gambalabs/apollo 6.0.0-alpha.17 → 6.0.0-alpha.20

package/dist/runtime/composables.mjs

@@ -1,44 +1,86 @@
 import { hash } from "ohash";
 import { print } from "graphql";
-import { ref, useCookie, useNuxtApp, useAsyncData } from "#imports";
-import NuxtApollo from "#build/apollo";
+import { ref, unref, isRef, reactive, useCookie, useNuxtApp, useAsyncData } from "#imports";
+import { NuxtApollo } from "#apollo";
 export function useAsyncQuery(...args) {
-  const { key, fn } = prep(...args);
-  return useAsyncData(key, fn);
+  const { key, fn, options } = prep(...args);
+  return useAsyncData(key, fn, options);
 }
 export function useLazyAsyncQuery(...args) {
-  const { key, fn } = prep(...args);
-  return useAsyncData(key, fn, { lazy: true });
+  const { key, fn, options } = prep(...args);
+  return useAsyncData(key, fn, { ...options, lazy: true });
 }
 const prep = (...args) => {
   const { clients } = useApollo();
-  const query = args?.[0]?.query || args?.[0];
-  const cache = args?.[0]?.cache ?? true;
-  const variables = args?.[0]?.variables || typeof args?.[1] !== "string" && args?.[1] || void 0;
-  let clientId = args?.[0]?.clientId || typeof args?.[1] === "string" && args?.[1] || void 0;
+  let query;
+  let variables;
+  let cache;
+  let clientId;
+  let context;
+  let options = {};
+  if (typeof args?.[0] === "object" && "query" in args[0]) {
+    query = args?.[0]?.query;
+    variables = args?.[0]?.variables;
+    cache = args?.[0]?.cache;
+    context = args?.[0]?.context;
+    clientId = args?.[0]?.clientId;
+    if (typeof args?.[1] === "object") {
+      options = args?.[1];
+    }
+  } else {
+    query = args?.[0];
+    variables = args?.[1];
+    clientId = args?.[2];
+    context = args?.[3];
+    if (typeof args?.[4] === "object") {
+      options = args?.[4];
+    }
+  }
+  if (!query) {
+    throw new Error("@nuxtjs/apollo: no query provided");
+  }
   if (!clientId || !clients?.[clientId]) {
-    clientId = clients?.default ? "default" : Object.keys(clients)[0];
+    clientId = clients?.default ? "default" : Object.keys(clients)?.[0];
+    if (!clientId) {
+      throw new Error("@nuxtjs/apollo: no client found");
+    }
+  }
+  if (variables) {
+    variables = isRef(variables) ? variables : reactive(variables);
+    options.watch = options.watch || [];
+    options.watch.push(variables);
   }
-  const key = args?.[0]?.key || hash({ query: print(query), variables, clientId });
-  const fn = () => clients[clientId]?.query({ query, variables, fetchPolicy: "no-cache" }).then((r) => r.data);
-  return { key, query, clientId, variables, fn };
+  const key = args?.[0]?.key || hash({ query: print(query), variables: unref(variables), clientId });
+  const fn = () => clients[clientId]?.query({
+    query,
+    variables: unref(variables) || void 0,
+    ...cache && { fetchPolicy: "cache-first" },
+    context
+  }).then((r) => r.data);
+  return { key, query, clientId, variables, fn, options };
 };
-export const useApollo = () => {
+export function useApollo() {
   const nuxtApp = useNuxtApp();
   const getToken = async (client) => {
     client = client || "default";
     const conf = NuxtApollo?.clients?.[client];
+    if (!conf) {
+      return;
+    }
     const token = ref(null);
     await nuxtApp.callHook("apollo:auth", { token, client });
     if (token.value) {
       return token.value;
     }
     const tokenName = conf.tokenName;
-    return conf?.tokenStorage === "cookie" ? useCookie(tokenName).value : process.client && localStorage.getItem(tokenName) || null;
+    return conf?.tokenStorage === "cookie" ? nuxtApp.runWithContext(() => useCookie(tokenName).value) : process.client && localStorage.getItem(tokenName) || null;
   };
   const updateAuth = async ({ token, client, mode, skipResetStore }) => {
     client = client || "default";
     const conf = NuxtApollo?.clients?.[client];
+    if (!conf) {
+      return;
+    }
     const tokenName = client && conf.tokenName;
     if (conf?.tokenStorage === "cookie") {
       const cookieOpts = client && conf?.cookieAttributes || NuxtApollo?.cookieAttributes;
@@ -63,30 +105,9 @@ export const useApollo = () => {
     await nuxtApp?._apolloClients?.[client].resetStore().catch((e) => console.log("%cError on cache reset", "color: orange;", e.message));
   };
   return {
-    /**
-     * Retrieve the auth token for the specified client. Adheres to the `apollo:auth` hook.
-     *
-     * @param {string} client The client who's token to retrieve. Defaults to `default`.
-     */
     getToken,
-    /**
-     * Access the configured apollo clients.
-     */
     clients: nuxtApp?._apolloClients,
-    /**
-     * Apply auth token to the specified Apollo client, and optionally reset it's cache.
-     *
-     * @param {string} token The token to be applied.
-     * @param {string} client - Name of the Apollo client. Defaults to `default`.
-     * @param {boolean} skipResetStore - If `true`, the cache will not be reset.
-     * */
     onLogin: (token, client, skipResetStore) => updateAuth({ token, client, skipResetStore, mode: "login" }),
-    /**
-     * Remove the auth token from the Apollo client, and optionally reset it's cache.
-     *
-     * @param {string} client - Name of the Apollo client. Defaults to `default`.
-     * @param {boolean} skipResetStore - If `true`, the cache will not be reset.
-     * */
     onLogout: (client, skipResetStore) => updateAuth({ client, skipResetStore, mode: "logout" })
   };
-};
+}

package/dist/runtime/plugin.d.ts

@@ -1,2 +1,34 @@
+import { ApolloClient } from '@apollo/client/core';
+import type { ErrorResponse } from '../types';
+import { useApollo } from './composables';
+import type { Ref } from '#imports';
+import type { ApolloClientKeys } from '#apollo';
 declare const _default: any;
 export default _default;
+export interface ModuleRuntimeHooks {
+    'apollo:auth': (params: {
+        client: ApolloClientKeys;
+        token: Ref<string | null>;
+    }) => void;
+    'apollo:error': (error: ErrorResponse) => void;
+}
+interface DollarApolloHelpers extends ReturnType<typeof useApollo> {
+}
+interface DollarApollo {
+    clients: Record<ApolloClientKeys, ApolloClient<any>>;
+    defaultClient: ApolloClient<any>;
+}
+declare module '#app' {
+    interface RuntimeNuxtHooks extends ModuleRuntimeHooks {
+    }
+    interface NuxtApp {
+        $apolloHelpers: DollarApolloHelpers;
+        $apollo: DollarApollo;
+    }
+}
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $apolloHelpers: DollarApolloHelpers;
+        $apollo: DollarApollo;
+    }
+}

package/dist/runtime/plugin.mjs

@@ -1,6 +1,7 @@
-import destr from "destr";
+import { destr } from "destr";
 import { onError } from "@apollo/client/link/error";
 import { getMainDefinition } from "@apollo/client/utilities";
+import { createApolloProvider } from "@vue/apollo-option";
 import { ApolloClients, provideApolloClients } from "@vue/apollo-composable";
 import { ApolloClient, ApolloLink, InMemoryCache, split } from "@apollo/client/core";
 import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
@@ -13,20 +14,26 @@ import createRestartableClient from "./ws.mjs";
 import { useApollo } from "./composables.mjs";
 import PusherLink from "./pusher.mjs";
 import { ref, useCookie, defineNuxtPlugin, useRequestHeaders } from "#imports";
-import NuxtApollo from "#apollo";
+import { NuxtApollo } from "#apollo";
 export default defineNuxtPlugin((nuxtApp) => {
   const requestCookies = process.server && NuxtApollo.proxyCookies && useRequestHeaders(["cookie"]) || void 0;
   const clients = {};
   for (const [key, clientConfig] of Object.entries(NuxtApollo.clients)) {
     const getAuth = async () => {
-      const token = ref();
+      const token = ref(null);
       await nuxtApp.callHook("apollo:auth", { token, client: key });
       if (!token.value) {
         if (clientConfig.tokenStorage === "cookie") {
           if (process.client) {
-            token.value = useCookie(clientConfig.tokenName).value;
+            const t = useCookie(clientConfig.tokenName).value;
+            if (t) {
+              token.value = t;
+            }
           } else if (requestCookies?.cookie) {
-            token.value = requestCookies.cookie.split(";").find((c) => c.trim().startsWith(`${clientConfig.tokenName}=`))?.split("=")?.[1];
+            const t = requestCookies.cookie.split(";").find((c) => c.trim().startsWith(`${clientConfig.tokenName}=`))?.split("=")?.[1];
+            if (t) {
+              token.value = t;
+            }
           }
         } else if (process.client && clientConfig.tokenStorage === "localStorage") {
           token.value = localStorage.getItem(clientConfig.tokenName);
@@ -54,9 +61,9 @@ export default defineNuxtPlugin((nuxtApp) => {
         }
       };
     });
-    const getCsrfToken = async () => {
+    const getCsrfToken = async (forceUpdate = false) => {
       const token = ref();
-      await nuxtApp.callHook("apollo:csrf", { token, client: key });
+      await nuxtApp.callHook("apollo:csrf", { token, client: key, forceUpdate });
       return token.value;
     };
     const csrfLink = setContext(async (_, { headers }) => {
@@ -85,10 +92,24 @@ export default defineNuxtPlugin((nuxtApp) => {
     if (clientConfig.persistedQueries) {
       persistedLink = createPersistedQueryLink({ sha256, useGETForHashedQueries: true });
     }
+    const customFetch = async (uri, options, blocked1stCall = false) => {
+      const response = await fetch(uri, options);
+      if (response.status === 419) {
+        const token = await getCsrfToken(true);
+        if (token && !blocked1stCall) {
+          return customFetch(uri, options, !blocked1stCall);
+        } else {
+          nuxtApp.callHook("apollo:error", { networkError: { bodyText: "Session Expired", statusCode: 419 } });
+        }
+      }
+      return response;
+    };
     const httpEndLink = createUploadLink({
       ...clientConfig?.httpLinkOptions && clientConfig.httpLinkOptions,
       uri: process.client && clientConfig.browserHttpEndpoint || clientConfig.httpEndpoint,
-      headers: { ...clientConfig?.httpLinkOptions?.headers || {} }
+      headers: { ...clientConfig?.httpLinkOptions?.headers || {} },
+      fetch: customFetch
+      // use custom fetch instead of default fetch to handle status code
     });
     const httpLink = baseLink.concat(httpEndLink);
     let wsLink = null;
@@ -114,23 +135,34 @@ export default defineNuxtPlugin((nuxtApp) => {
     }
     let pusherLink = null;
     if (process.client && clientConfig.pusher) {
-      pusherLink = new PusherLink({
-        pusher: new Pusher(clientConfig.pusher.pusherAppKey, {
-          wsHost: clientConfig.pusher.wsHost,
-          wsPort: clientConfig.pusher.wsPort,
-          forceTLS: clientConfig.pusher.forceTLS,
-          disableStats: true,
-          enabledTransports: ["ws", "wss"],
-          cluster: clientConfig.pusher.cluster,
-          channelAuthorization: {
-            endpoint: clientConfig.pusher.channelEndpoint,
-            headersProvider() {
-              const { token: csrfToken } = nuxtApp.$csrfToken();
-              const { token: authToken } = nuxtApp.$authToken();
-              return { "X-CSRF-Token": csrfToken.value, authorization: `Bearer ${authToken.value}` };
-            }
+      const pusherObj = new Pusher(clientConfig.pusher.pusherAppKey, {
+        wsHost: clientConfig.pusher.wsHost,
+        wsPort: clientConfig.pusher.wsPort,
+        forceTLS: clientConfig.pusher.forceTLS,
+        disableStats: true,
+        enabledTransports: ["ws", "wss"],
+        cluster: clientConfig.pusher.cluster,
+        activityTimeout: clientConfig.pusher.activityTimeout,
+        reconnect: {
+          auto: true
+        },
+        channelAuthorization: {
+          endpoint: clientConfig.pusher.channelEndpoint,
+          headersProvider() {
+            const { token: csrfToken } = nuxtApp.$csrfToken();
+            const { token: authToken } = nuxtApp.$authToken();
+            return { "X-CSRF-Token": csrfToken.value, authorization: `Bearer ${authToken.value}` };
           }
-        })
+        }
+      });
+      const handleVisibilityChange = () => {
+        if (document.visibilityState === "visible" && pusherObj.connection.state !== "connected") {
+          pusherObj.connect();
+        }
+      };
+      document.addEventListener("visibilitychange", handleVisibilityChange);
+      pusherLink = new PusherLink({
+        pusher: pusherObj
       });
     }
     const errorLink = onError((err) => {
@@ -187,6 +219,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   }
   provideApolloClients(clients);
   nuxtApp.vueApp.provide(ApolloClients, clients);
+  nuxtApp.vueApp.use(createApolloProvider({ defaultClient: clients?.default }));
   nuxtApp._apolloClients = clients;
   const defaultClient = clients?.default;
   return {

package/dist/shared/apollo.d410709a.d.mts

@@ -0,0 +1,202 @@
+import { ClientOptions } from 'graphql-ws';
+import { HttpOptions, DefaultOptions, InMemoryCacheConfig } from '@apollo/client';
+import { CookieOptions } from 'nuxt/app';
+
+type CookieAttributes = Omit< CookieOptions, 'encode' | 'decode' | 'expires' | 'default'>;
+
+type Pusher = {
+  cluster: string;
+  wsHost: string;
+  wsPort: number;
+  forceTLS: boolean;
+  channelEndpoint: string;
+  pusherAppKey: string;
+  activityTimeout: number;
+}
+
+type ClientConfig = {
+  /**
+   * The GraphQL endpoint.
+   * @type {string}
+   */
+  httpEndpoint: string;
+
+  /**
+   * Provide a GraphQL endpoint to be used client-side. Overrides `httpEndpoint`.
+   * @type {string}
+   **/
+  browserHttpEndpoint?: string;
+
+  /**
+   * Provide additional configuration for the `HttpLink`.
+   * See https://www.apollographql.com/docs/link/links/http.html#options
+   * @type {HttpOptions}
+   **/
+  httpLinkOptions?: Omit<HttpOptions, 'uri'>;
+
+  /**
+   * Provide additional configuration for the `GraphQLWsLink`.
+   * See https://github.com/enisdenjo/graphql-ws/blob/master/docs/interfaces/client.ClientOptions.md
+   **/
+  wsLinkOptions?: Omit<ClientOptions, 'url' | 'connectionParams'>;
+
+  /**
+   * Specify a websocket endpoint to be used for subscriptions.
+   * The `wss` protocol is recommended in production.
+   * @type {string}
+   **/
+  wsEndpoint?: string;
+
+  /**
+   * Specify if the client should solely use WebSocket.
+   * requires `wsEndpoint`.
+   * @type {boolean}
+   * @default false
+   **/
+  websocketsOnly?: boolean;
+
+  /**
+   * Specify a pusher config to be used for subscriptions.
+   * @type {Pusher}
+   **/
+  pusher?: Pusher
+
+  /**
+   * Specify if the client should be able to connect to the Apollo Client Devtools in production mode.
+   * @type {boolean}
+   * @default false
+   **/
+  connectToDevTools?: boolean;
+
+  /**
+   * Configure default options to be applied to the apollo client.
+   **/
+  defaultOptions?: DefaultOptions;
+
+  /**
+   * Configure the in-memory cache.
+   **/
+  inMemoryCacheOptions?: InMemoryCacheConfig;
+
+  /**
+   * Specify the name under which the token will be stored.
+   * as in either a cookie or localStorage.
+   * @type {string}
+   * @default "apollo:<client-name>.token"
+   */
+  tokenName?: string;
+
+  /**
+   * Specify if the auth token should be stored in `cookie` or `localStorage`.
+   * `Cookie` storage is required for SSR.
+   * @type {string}
+   * @default "cookie"
+   **/
+  tokenStorage?: 'cookie' | 'localStorage';
+
+  /**
+   * Specify the Authentication scheme.
+   * @type {string}
+   * @default "Bearer"
+   **/
+  authType?: string | null;
+
+  /**
+   * Name of the Authentication token header.
+   * @type {string}
+   * @default "Authorization"
+   */
+  authHeader?: string;
+
+  /**
+   * Configuration for the auth cookie.
+   **/
+  cookieAttributes?: CookieAttributes;
+
+  /**
+   * Name of the CSRF token header.
+   * @type {string}
+   * @default "X-CSRF-TOKEN"
+   */
+  csrfHeader?: string
+
+  /**
+   * Enable automatic persisted queries.
+   * @type {boolean}
+   * @default false
+   */
+  persistedQueries?: boolean
+};
+
+interface NuxtApolloConfig<T = false> {
+  /**
+   * Determine if vue-apollo composables should be automatically imported.
+   * @type {boolean}
+   * @default true
+   **/
+  autoImports?: boolean;
+
+  /**
+   * Configuration of the Apollo clients.
+   **/
+  clients?: Record< string, T extends false ? string | ClientConfig : ClientConfig >;
+
+  /**
+   * Default options to be applied to all Apollo clients.
+   * This is useful for setting global defaults, and is overridden by `defaultOptions` passed directly to clients.
+   **/
+  defaultOptions?: DefaultOptions;
+
+  /**
+   * Pass cookies from the browser to the GraphQL API in SSR mode.
+   *
+   * @type boolean
+   * @default true
+   * */
+  proxyCookies?: boolean;
+
+  /**
+   * Specify the Authentication scheme.
+   * @type {string}
+   * @default 'Bearer'
+   **/
+  authType?: string;
+
+  /**
+   * Name of the Authentication token header.
+   * @type {string}
+   * @default "Authorization"
+   */
+  authHeader?: string;
+
+  /**
+   * Name of the CSRF token header.
+   * @type {string}
+   * @default "X-CSRF-TOKEN"
+   */
+  csrfHeader?: string;
+
+  /**
+   * Specify if the auth token should be stored in `cookie` or `localStorage`.
+   * `Cookie` storage is required for SSR.
+   * @type {string}
+   * @default "cookie"
+   **/
+  tokenStorage?: 'cookie' | 'localStorage';
+
+  /**
+   * Configuration for the auth cookie.
+   **/
+  cookieAttributes?: CookieAttributes;
+
+  /**
+   * Apollo client awareness instructs the client to send two additional headers
+   * `apollographql-client-name` and `apollographql-client-version` in each HTTP request.
+   * This behavior is disabled by default.
+   * @type {boolean}
+   * @default false
+   */
+  clientAwareness?: boolean
+}
+
+export type { ClientConfig as C, NuxtApolloConfig as N };