As @guilhermedecampo said, this does not work with RN, because it relies on FileList check, which is not available on RN.

You guys have a suggestion to make it easy/seamless using react-native?

Since we just create an object for the file-upload the check logic does not fit because it relies on FileList / File instanceof as you can see here https://github.com/HriBB/apollo-upload-network-interface/blob/master/src/UploadNetworkInterface.js#L21 and here https://github.com/HriBB/apollo-upload-network-interface/blob/master/src/UploadNetworkInterface.js#L47.

Thanks!

I don't use RN yet, so I have absolutely no idea on how to support this. @guilhermedecampo any ideas?

@sandervanhooft @thebigredgeek if you want, I can give you admin access to all repositories for apollo file upload. You guys are very active and I am really busy ATM, so I think it's best if we work together. Maybe we can even create a new organization/repository and use lerna and typescript in the same way as graphql-server.

In any case, we should discuss some things, because I think that apollo core devs are busy with 1.0, so I guess it's up to us to create something that works. What do you guys think?

Very pleased with this package. Glad I won't need to roll my own solution haha. I was wondering if we could expose a higher-order function to decorate an existing network interface? I am currently doing the following for subscriptions:

import { print } from 'graphql-tag/printer';

// quick way to add the subscribe and unsubscribe functions to the network interface
export default function addGraphQLSubscriptions(networkInterface, wsClient) {
  return Object.assign(networkInterface, {
    subscribe(request, handler) {
      return wsClient.subscribe({
        query: print(request.query),
        variables: request.variables,
      }, handler);
    },
    unsubscribe(id) {
      wsClient.unsubscribe(id);
    },
  });
}

It seems like this will be a normal pattern moving forward for extended the default apollo network interface. I don't think it would be too difficult to expose an interface for something like this, and I am willing to submit a PR if you don't have time for it.

Thoughts @HriBB ?

My transpiler is having trouble importing 'apollo-client/transport/networkInterface':

Error: Parsing file node_modules/apollo-client/transport/networkInterface.js: 'import' and 'export' may only appear at the top level (10:0)

I created a PR.

Basically, allow for mutations instead of just like this:

updateAvatar(userId: String!, file: [UploadedFile!]!): Avatar

Also like this:

updateAvatar(userId: String!, file: UploadedFile!): Avatar

• Clearer semantics.
• Better validation for mutations requiring only one file in a variable.
• It is sometimes easier to get a single File object to send as a mutation parameter:

handleSubmit = event => {
    event.preventDefault()
    const formData = new window.FormData(event.target)
    this.props.mutate({
      variables: {
        userId: this.props.userId,
        file: formData.get('avatar') // Instance of File (not FileList), from <input type='file' name='avatar' required />
      }
    }).then(({data}) => {
      console.log('Avatar updated', data)
    })
  }

To get this to work, handle File as well as FileList here and here.

When installing, I get this warning:

npm WARN deprecated @types/[email protected]: This is a stub types definition for Redux (https://github.com/reactjs/redux). Redux provides its own type definitions, so you don't need @types/redux installed!

(Which I just ignore)

@HriBB @thebigredgeek

What type should the files variable be when passed to the mutation?

The file upload works fine when using your example code. But when using react-dropzone or tcomb-form the files seem to be not handled appropriately.

We should probably support FileLists nested in variables. It's common to pass an input type rather than scalars for mutation and query params. It seems like a simple bit of recursion could make this work.

Hi guys, is there a complete working example of the implementation of this somewhere? I've never done file uploads before. I'm a bit stuck and don't know where to start. I've been having trouble getting stuff to work: http://stackoverflow.com/questions/42058634/upload-image-to-graphql-server

Hi, I have issue after use it.

This is the code

import ApolloClient from 'apollo-client';
import createNetworkInterface from 'apollo-upload-network-interface';


const networkInterface = createNetworkInterface({
  uri: GRAPHQL_ENDPOINT,
});

const client = new ApolloClient({
  networkInterface
});

then when run the applications this is the error.

Uncaught SyntaxError: Unexpected token import -> networkInterface.js?formatted:9


import 'whatwg-fetch'; <- here is where the error appear
import { print } from 'graphql-tag/printer';
export function printRequest(request) {

apollo-client and apollo-upload-network-interface versions here

"apollo-client": "^0.8.3",
"apollo-upload-network-interface": "^1.0.4",

thanks

I'm trying to upload a file like this:

const ATTACH_IMAGE = gql`
  mutation attachImage($entityID: Int!, $mappingName: String!, $image: UploadedFile) {
    attachImage(entityID:$entityID, mappingName:$mappingName) {
      __typename
      id
      url
    }
}`;

this.props.client.mutate({
   mutation: ATTACH_IMAGE,
   variables: {
      image: this.state.uploadedFile,
      entityID: 3,
      mappingName: "organization_background"
   }

But I get this error message:

GraphQL error: Variable "image" not used

It seems that Apollo checks the mutation and notices that the $image variable is not used anywhere, even though I need to set it if I want the apollo-upload-network-interface to take care of it. I already had this problem when I did a custom implementation of a network interface, and the only way I found is to manually remove the $image: UploadedFile bit from the mutation string, not a great solution!

Any idea of what might go wrong? Do you have a working example somewhere?