Apollo-client: File upload

[gmchaturvedi1]

i am new to apolloclient and and things is going well except file upload.Kindly suggest me how to handle multipartform data with file upload.

your help is always appreciated

regards
gmchaturvedi

[sandervanhooft]

This tutorial was posted a few days ago, haven't tried it yet.

[gmchaturvedi1]

i tried but error is coming "GraphQL error: Unknown operation named """

[sandervanhooft]

Can you be more specific? When does this error occur? Could you share some code?

Given the error you provided, specifically the request format would be of interest. It seems the operationName or query may be invalid. (Also see here.)

[gmchaturvedi1]

my apollo config file as follow:

import ApolloClient from 'apollo-client';
import {url} from './config';

import { print as printGraphQL } from 'graphql-tag/printer';
import RecursiveIterator from 'recursive-iterator';
import objectPath from 'object-path';

export function createNetworkInterface(url) {
return {
query(request) {
const formData = new FormData();

        // search for File objects on the request and set it as formData
        for(let { node, path } of new RecursiveIterator(request.variables)) {
            if (node instanceof File) {
                const id = Math.random().toString(36);
                formData.append(id, node);
                objectPath.set(request.variables, path.join('.'), id);
            }
        }

        formData.append('query', printGraphQL(request.query));
        formData.append('variables', JSON.stringify(request.variables || {}));
        formData.append('debugName', JSON.stringify(request.debugName || ''));
        formData.append('operationName', JSON.stringify(request.operationName || ''));

        return fetch(url, {
            headers: { Accept: '*/*',

    /*authorization:localStorage.getItem('token') ? localStorage.getItem('token') : null*/ },
            body: formData,
            method: 'POST',
        }).then(result => result.json());
    }
}

}

const networkInterface = createNetworkInterface(${url}/graphql);

export const client= new ApolloClient({
networkInterface
});

when i am just commenting the line
// formData.append('operationName', JSON.stringify(request.operationName || ''));
all goes well but it is required for file operations

kindly suggest ?

[HriBB]

Does the error happen on client or server? If you are using apollo-server, file uploads are not yet supported. Take a look at this issue and this PR. Still on my TODO list, but I haven't had the time to start working on it.

[gmchaturvedi1]

this is in apolloclient and i have my graphqljs server which support fileupload.

[kachkaev]

It's been silent here for about a month in the thread and I'm curious about the plans on file upload feature in Apollo. This is currently what's stopping me from using this stack in the first place. Will probably try express-graphql meanwhile and hope it will be easy to transfer to Apollo later on. Thanks @sandervanhooft for a link to that medium blog post.

[HriBB]

@kachkaev check out this topic. File upload is coming to Apollostack, but I'm guessing that core devs have more important things to do ATM. But they are open to PRs ;)

[karthikiyengar]

The strategy I'm currently using for uploads is to pretty much to send a Base64 DataURI to the endpoint. Apart from the increased payload sizes, are there any obvious issues with this? I find this approach easy to reason about as all of my application logic is contained within GraphQL.

[calebmer]

Going to close this as it seems like a duplicate of https://github.com/apollostack/apollo/issues/65.

@karthikiyengar your comment may be valuable in that thread if you want to re-post there 😊

[clodal]

Link to #65 is broken. Any idea what happened?

[joshjg]

For anyone stumbling upon this issue:
https://www.apollographql.com/docs/guides/file-uploads.html