Comments (21)
but how do you exactly do it in vue-apollo? there is no documentation found in the apollo.vuejs.org .
from apollo.
https://github.com/wolfiton/vue-upload helped me out a lot
from apollo.
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
from apollo.
here is the example of how I call my mutation:
await this.$apollo.mutate({
mutation: require('@/app/graphql/mutations/CreateProduct.gql'),
variables: {
name: item.name,
productImage: item.upload,
units: item.units,
price: item.price,
category: item.category.id
},
context: {
hasUpload: true
}
})
when I console.log(item.upload)
it outputs a File object.
here is the example of my mutation:
mutation(
$name: String!
$units: Int!
$productImage: Upload!
$price: Float!
$category: ID!
) {
createProduct(input: {
name: $name
units: $units
productImage: $productImage
price: $price
category: { connect: $category }
}) {
id
category {
name
}
}
}
from apollo.
yarn add @apollo/client apollo-upload-client
in your vue-apollo.js file
import {createUploadLink} from 'apollo-upload-client'
then replace http link with createUploadLink({ uri: 'your uri'}),
This worked for me.
from apollo.
I found something but i think its outdated: https://medium.com/@danielbuechele/file-uploads-with-graphql-and-apollo-5502bbf3941e#.qpca4mzfd
from apollo.
I have same problem. Example will help a lot.
@Samuell1 did you found something?
from apollo.
@dsdjolence I using other endpoint to only upload files.
from apollo.
@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
from apollo.
nevermind just found the solution in the react examples.
from apollo.
@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?
from apollo.
@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)
from apollo.
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
}
from apollo.
Did anyone get this to work?
from apollo.
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.
from apollo.
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 :)
from apollo.
@jongbonga just pass a file parameter to your mutation something like this:
mutation uploadFile($id:String!,$file: Upload!){
uploadFile(id: $id, file: $file){
.
.
.
}
}
from apollo.
Hi everyone, I get the following error when I pass file to mutation.
app.js:169321 Error: GraphQL error: Variable "$productImage" got invalid value []; Expected type Upload; Could not get uploaded file, be sure to conform to GraphQL multipart request specification: https://github.com/jaydenseric/graphql-multipart-request-spec Instead got: []
at new ApolloError (app.js:4873)
at Object.next (app.js:5812)
at notifySubscription (app.js:181947)
at onNotify (app.js:181991)
at SubscriptionObserver.next (app.js:182047)
at app.js:5674
at Set.forEach (<anonymous>)
at Object.next (app.js:5674)
at notifySubscription (app.js:181947)
at onNotify (app.js:181991)
Everything should be working but I can't seem to find any example has anyone of your succeeded in finding one??
from apollo.
Hey @asolopovas, can you put an example of your mutation? because it seems your passing an empty array.
from apollo.
As @alexsedeke mentioned, you don't need to add apollo-upload-client
to your packages.
Simply create an ApolloClient
and call your mutation with a file (or files) as your variables
.
Note that the server you are calling must have configured an Upload integration.
// Cache
const cache = new InMemoryCache();
// Create the apollo client
export const apolloClient = new ApolloClient({
uri: 'LINK TO YOUR GRAPHQL SERVER', // Replace here
cache,
});
// Mutation
const UPLOAD_MUTATION = gql`
mutation UploadFile($file: Upload!) {
uploadFile(file: $file)
}
`;
// Call mutation in V4 of VueApollo
const { mutate } = useMutation(UPLOAD_MUTATION);
// Make sure this is a file
mutate({ file });
// Or use the apolloClient
apolloClient.mutate({
mutation: UPLOAD_MUTATION,
variables: { file },
});
Hope it helps!
from apollo.
As @alexsedeke mentioned, you don't need to add
apollo-upload-client
to your packages. Simply create anApolloClient
and call your mutation with a file (or files) as yourvariables
.Note that the server you are calling must have configured an Upload integration.
// Cache const cache = new InMemoryCache(); // Create the apollo client export const apolloClient = new ApolloClient({ uri: 'LINK TO YOUR GRAPHQL SERVER', // Replace here cache, }); // Mutation const UPLOAD_MUTATION = gql` mutation UploadFile($file: Upload!) { uploadFile(file: $file) } `; // Call mutation in V4 of VueApollo const { mutate } = useMutation(UPLOAD_MUTATION); // Make sure this is a file mutate({ file }); // Or use the apolloClient apolloClient.mutate({ mutation: UPLOAD_MUTATION, variables: { file }, });Hope it helps!
AND
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.
are currently (Apollo Vuejs client V4) WRONG. You have to use the apollo-upload-client
, for example like this:
const client = new ApolloClient({
link: ApolloLink.from([
// ...
new HttpLink({
uri: '/graphql'
})
])
})
(Source: https://dev.to/marvinrabe/file-upload-with-vue-apollo-client-and-graphql-5emb)
Then you can use the normal mutation including the "Upload" Scalar.
from apollo.
Related Issues (20)
- Not work with 3.2.25 HOT 2
- Make `provideApolloClient` default client disposable.
- Remove automatic subscription retry on error
- Can't receive messages in a chat using subscription
- skip() doesn't skip query HOT 1
- @vue/apollo-ssr doesn't work in SSR mode
- Fragments aren't returned in results when using useQuery/useLazyQuery reactive refs HOT 2
- Using vue-apollo-composable inside a Pinia setup store HOT 2
- `useApolloClient` checks wrong conditions before calling `inject()`
- useQuery blocks page load on 4.0.0 HOT 2
- useQuery with fetchPolicy: cache-only does not return expected data HOT 3
- Doesn't update the data after a mutation if `enabled` is `false` in `useQuery`
- Queries are not executed in given order
- @vue/[email protected] has a peer dependency conflict with Vue 3 HOT 4
- [docs] The installation guide is very bad HOT 1
- Refetch with New Variables Overrides Other Existing Refetches HOT 1
- `onBeforeUnmount` hook in `useQuery` is undesirable when used in pinia store HOT 1
- [Documentation] Composition API + Options API Configuration, how to make it work together? HOT 2
- Updating the `variables` ref does not work when using the function form
- Production breaks, dev mode works (Apollo client with id default not found.) HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apollo.