Vue-apollo: Image/file upload mutation example?

[Samuell1]

[Samuell1]

I found something but i think its outdated: https://medium.com/@danielbuechele/file-uploads-with-graphql-and-apollo-5502bbf3941e#.qpca4mzfd

[dsdjolence]

I have same problem. Example will help a lot.
@Samuell1 did you found something?

[Samuell1]

@dsdjolence I using other endpoint to only upload files.

[Samuell1]

I found for Apollo 2+ there is plugin that can allow upload files with GraphQL
Client: https://github.com/jaydenseric/apollo-upload-client
Server: https://github.com/jaydenseric/apollo-upload-server

[dohomi]

@Samuell1 did you get this work with vue-apollo and apollo-upload-client? I currently try but the issue is that the variables upload array is always NULL instead of a File object. Would be great to see a working example with vue-apollo

[dohomi]

nevermind just found the solution in the react examples.

[razorabhu1995]

@dohomi
same problem for me. "the variables upload array is always NULL instead of a File object. "

did you find the solution for vue-apollo or nuxt-community/apollo-module?

[dohomi]

@razorabhu1995 the NULL client side debug is happening because the server already took over to process the data upload. As long you see the right mutation according to the apollo-upload-client it should work finde. apollo-module let you use file-upload out of the box (make sure you use the most recent version of all the modules - maybe remove node_modules and reinstall to make 100% sure that all packages are up-to-date)

[eddivalen]

Hey @dohomi I'm still getting NULL when I try to upload a file.
This is my vue-apollo.js config

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'
import { createUploadLink } from 'apollo-upload-client'


// Install the vue plugin
Vue.use(VueApollo)

// Name of the localStorage item
const AUTH_TOKEN = 'auth_token'

// Http endpoint
const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP
export const filesRoot = process.env.VUE_APP_FILES_ROOT || httpEndpoint.substr(0, httpEndpoint.indexOf('/graphql'))


Vue.prototype.$filesRoot = filesRoot

// Config
const defaultOptions = {
  // You can use `https` for secure connection (recommended in production)
  httpEndpoint,
  // You can use `wss` for secure connection (recommended in production)
  // Use `null` to disable subscriptions
  wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || null,
  // LocalStorage token
  tokenName: AUTH_TOKEN,
  // Enable Automatic Query persisting with Apollo Engine
  persisting: false,
  // Use websockets for everything (no HTTP)
  // You need to pass a `wsEndpoint` for this to work
  websocketsOnly: false,
  // Is being rendered on the server?
  ssr: false,

  // Override default apollo link
  // note: don't override httpLink here, specify httpLink options in the
  // httpLinkOptions property of defaultOptions.
  // link: myLink
  defaultHttpLink: false,
  httpLinkOptions : {
      httpLink : createUploadLink({
      uri: httpEndpoint,
      })
  },

  // Override default cache
  // cache: myCache

  // Override the way the Authorization header is set
   getAuth: tokenName => {
     // get the authentication token from local storage if it exists
    const token = Vue.cookie.get(tokenName) ? 'JWT ' + Vue.cookie.get(tokenName) : null
    // return the headers to the context so httpLink can read them
    return  token || ''
   },

  // Additional ApolloClient options
  // apollo: { ... }

  // Client local data (see apollo-link-state)
  // clientState: { resolvers: { ... }, defaults: { ... } }
}
// Create apollo client

export const { apolloClient, wsClient } = createApolloClient({
  ...defaultOptions,
})

apolloClient.wsClient = wsClient


// Create vue apollo provider
export const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
  connectToDevTools: true,
  defaultOptions: {
    $query: {
      // fetchPolicy: 'cache-and-network',
    },
  },
  errorHandler (error) {
    // eslint-disable-next-line no-console
    console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
  },
})
// Call this in the Vue app file
export function createProvider (options = {}) {

  return apolloProvider
}

[Oluwasetemi]

Did anyone get this to work?

[alexandervu]

apollo-upload-client does not have to be imported and integrated. It is already part of vue-apollo, and already integrated.So no need to do anything.

[ram231]

but how do you exactly do it in vue-apollo? there is no documentation found in the apollo.vuejs.org .

[jongbonga]

apollo-upload-client does not have to be imported and integrated. It is already part of vue-apollo, and already integrated.So no need to do anything.

An example will be great :)

[eddivalen]

@jongbonga just pass a file parameter to your mutation something like this:

mutation uploadFile($id:String!,$file: Upload!){
    uploadFile(id: $id, file: $file){
      .
      .
      .
    }
}