feat: apollo-client-upload support

docs/content/1.getting-started/2.configuration.md

@@ -16,7 +16,8 @@ export default defineNuxtConfig({
     authHeader: 'Authorization',
     tokenStorage: 'cookie',
     proxyCookies: true,
-    clients: {}
+    clients: {},
+    useApolloUploadLink: true
   }
 })
 ```
@@ -76,7 +77,8 @@ export default defineNuxtConfig({
         tokenName: 'apollo:<client-name>.token',
         tokenStorage: 'cookie',
         authType: 'Bearer',
-        authHeader: 'Authorization'
+        authHeader: 'Authorization',
+        useApolloUploadLink: true
       },
       other: './apollo/other.ts'
     }
@@ -100,7 +102,8 @@ export default defineApolloClient({
   tokenName: 'apollo:<client-name>.token',
   tokenStorage: 'cookie',
   authType: 'Bearer',
-  authHeader: 'Authorization'
+  authHeader: 'Authorization',
+  useApolloUploadLink: true
 })
 ```
 ::
@@ -166,3 +169,10 @@ Specify the Authentication scheme.
   - Default: `Authorization`
 
 Name of the Authentication token header.
+
+- ### `useApolloUploadLink`
+
+  - Default: `true`
+
+Specify if the client should use `apollo-upload-client` for file uploads. This is required for file uploads.
+

package.json

@@ -44,6 +44,7 @@
     "@rollup/plugin-graphql": "^2.0.5",
     "@vue/apollo-composable": "^4.2.2",
     "@vue/apollo-option": "^4.2.2",
+    "apollo-upload-client": "^18.0.1",
     "defu": "^6.1.4",
     "destr": "^2.0.5",
     "graphql": "^16.11.0",

playground/apollo/default.ts

@@ -27,5 +27,8 @@ export default defineApolloClient({
 
   // Specify if the client should solely use WebSocket.
   // requires `wsEndpoint`.
-  websocketsOnly: false
+  websocketsOnly: false,
+
+  // Specify if the client should use `apollo-upload-client` for file uploads.
+  useApolloUploadLink: true
 })

src/module.ts

@@ -39,7 +39,8 @@ export default defineNuxtModule<ModuleOptions>({
       secure: process.env.NODE_ENV === 'production',
       sameSite: 'lax'
     },
-    clientAwareness: false
+    clientAwareness: false,
+    useApolloUploadLink: true
   },
   async setup(options, nuxt) {
     if (!options.clients || !Object.keys(options.clients).length) {
@@ -84,6 +85,7 @@ export default defineNuxtModule<ModuleOptions>({
         v.authHeader = v?.authHeader || options.authHeader
         v.tokenName = v?.tokenName || `apollo:${k}.token`
         v.tokenStorage = v?.tokenStorage || options.tokenStorage
+        v.useApolloUploadLink = v?.useApolloUploadLink || options.useApolloUploadLink
         if (v.cookieAttributes) {
           v.cookieAttributes = defu(v?.cookieAttributes, options.cookieAttributes)
         }

src/runtime/plugin.ts

@@ -4,6 +4,7 @@ import { getMainDefinition } from '@apollo/client/utilities'
 import { createApolloProvider } from '@vue/apollo-option'
 import { ApolloClients, provideApolloClients } from '@vue/apollo-composable'
 import { ApolloClient, ApolloLink, createHttpLink, InMemoryCache, split } from '@apollo/client/core'
+import uploadHttpLink from 'apollo-upload-client/createUploadLink.mjs'
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
 import { setContext } from '@apollo/client/link/context'
 import type { ClientConfig, ErrorResponse } from '../types'
@@ -73,11 +74,14 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
     })
 
-    const httpLink = authLink.concat(createHttpLink({
+    const httpLinkOptions = {
       ...(clientConfig?.httpLinkOptions && clientConfig.httpLinkOptions),
       uri: (import.meta.client && clientConfig.browserHttpEndpoint) || clientConfig.httpEndpoint,
       headers: { ...(clientConfig?.httpLinkOptions?.headers || {}) }
-    }))
+    }
+
+    // Apollo Http Client
+    const httpLink = clientConfig.useApolloUploadLink ? authLink.concat(uploadHttpLink(httpLinkOptions)) : authLink.concat(createHttpLink(httpLinkOptions))
 
     let wsLink: GraphQLWsLink | null = null
 

src/types.d.ts

@@ -101,6 +101,13 @@ export type ClientConfig = {
    * Configuration for the auth cookie.
    */
   cookieAttributes?: CookieAttributes
+
+  /**
+   * Use 'apollo-upload-client' for file uploads, instead of the standard apollo HttpLink.
+   * @type {boolean}
+   * @default true
+   */
+  useApolloUploadLink?: boolean
 }
 
 export interface NuxtApolloConfig<T = false> {
@@ -165,4 +172,11 @@ export interface NuxtApolloConfig<T = false> {
    * @default false
    */
   clientAwareness?: boolean
+
+  /**
+   * Use 'apollo-upload-client' for file uploads, instead of the standard apollo HttpLink.
+   * @type {boolean}
+   * @default true
+   */
+  useApolloUploadLink?: boolean
 }