Support React Native about apollo-upload-client HOT 27 CLOSED

To test the branch, try:

1. Cloning or downloading it.
2. Run npm link in it's directory.
3. In your project, run npm link apollo-upload-client.

To undo the above later, run the same commands in reverse order, with unlink in place of link.

from apollo-upload-client.

Add typeof File !== 'undefined' at here https://github.com/jaydenseric/apollo-upload-client/blob/master/src/helpers.js#L21
And typeof FileList !== 'undefined' at https://github.com/jaydenseric/apollo-upload-client/blob/master/src/helpers.js#L38

from apollo-upload-client.

@jaydenseric : After i modify bundled source and reload, very things work okay.

Ps: You always tag wrong persion. :D

from apollo-upload-client.

One thing I am not super happy about is the possibility of false positives when identifying React Native file objects here; the check just looks for the presence of relevant properties. It is conceivable that people might have nodes other than files with those properties.

I think we can implement a FileInput for react-native like this:

// file-input.js

export class FileInput {
  constructor({ name, type, uri } = {}) {
    this.name = name;
    this.type = type;
    this.uri = uri;
  }

  static fromArray = (array, defaultType = 'image/png') => Array.isArray(array)
    ? array.map(({ name, type, uri }, index) => new FileInput({
        name: name || `file_${index}`,
        type: type || defaultType,
        uri,
      }))
    : null;
}

export isFile = node => typeof File !== 'undefined'
  ? node instanceof File
  : node instanceof FileInput

from apollo-upload-client.

I don't have experience with react-native, but it it seems like a good idea to support it. Are you able to share what specifically doesn't work, or needs to be changed?

from apollo-upload-client.

I tried adding this to a RN project and realized as well that this package is coupled to web apps at the moment. Can't get RN to compile.

from apollo-upload-client.

Thanks all for the various pull requests and suggestions, they have helped me to understand most of what needs to change.

There is a new support-react-native branch.

I have tested it for web and everything seems to work the same, just need to make sure it actually works on React Native. If anyone could test it out and report issues, that would be a big help.

If you would like to submit a pull request to it, make sure to select that branch and not master.

One thing I am not super happy about is the possibility of false positives when identifying React Native file objects here; the check just looks for the presence of relevant properties. It is conceivable that people might have nodes other than files with those properties.

from apollo-upload-client.

Please notify user need to be install there modules before use.

npm - --save-dev babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0

or

yarn add --dev babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0

from apollo-upload-client.

I trying install module via git. Then

yarn add https://github.com/jaydenseric/apollo-upload-client.git#support-react-native
yarn add --dev babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0

AND

cd ./node_modules/apollo-upload-client
yarn build

Reload the app and getting:

Install via npm or git (with dist folder committed) will work fine. I don't know why. :(

from apollo-upload-client.

That workaround to install the dev deps in your app will work, but that is only necessary (from my understanding) due to recent bugs in the React Native ecosystem.

About the git install thing, I just learned this about npm myself recently: Installs using Git only has the committed files in the repo to pull down, due to gitignore. npm installs for the last several major versions of npm no longer run prepublish scripts. There is huge discussion in npm github issues about that frustration. Because npm link is horribly buggy, testing forks or updates is really inconvenient.

from apollo-upload-client.

@giautm on the $export is not a function issue, perhaps it relates to this: facebook/react-native#4062 (comment).

from apollo-upload-client.

Didn't work, #10 (comment) Huhu. :(

Can you make a npm release with tag #support-react-native ?

from apollo-upload-client.

Removed the feature branch, we will work on this on master for the next version.

Try installing [email protected].

from apollo-upload-client.

Just installed the latest alpha. Hit an issue on the babel-plugin-transform-runtime dependency.

Was able to get past this by installing that dependency as a dep on my own project. However, now I'm hitting:

from apollo-upload-client.

FYI - solved the above by also installing babel-preset-env. Project compiles now. Testing functionality...

from apollo-upload-client.

@jaydenseric : I got an error with 4.1.0-alpha-1

 Can't find variable: File

from apollo-upload-client.

@giautm good stuff. Any other obvious issues before I push a new version?

from apollo-upload-client.

Sorry!

Published [email protected].

from apollo-upload-client.

@jaydenseric I can confirm it working on react-native. But, remember to remind user to do this #10 (comment)

Ps: Many thanks to two days workings together. Happy coding. 👍

from apollo-upload-client.

I was able to get the code to execute on the React Native side, but ran into issues on the server side (I'm using Meteor on the backend to host an Express GQL server). When I run the mutation that uploads a base64 encoded file:

W20170622-06:24:22.274(-4)? (STDERR) Error
W20170622-06:24:22.274(-4)? (STDERR)     at readStream (/Users/jcursi/Sites/joncursi/redbird-web/node_modules/raw-body/index.js:196:17)
W20170622-06:24:22.274(-4)? (STDERR)     at getRawBody (/Users/jcursi/Sites/joncursi/redbird-web/node_modules/raw-body/index.js:106:12)
W20170622-06:24:22.274(-4)? (STDERR)     at read (/Users/jcursi/Sites/joncursi/redbird-web/node_modules/body-parser/lib/read.js:76:3)
W20170622-06:24:22.275(-4)? (STDERR)     at jsonParser (/Users/jcursi/Sites/joncursi/redbird-web/node_modules/body-parser/lib/types/json.js:127:5)
W20170622-06:24:22.275(-4)? (STDERR)     at Layer.handle [as handle_request] (/Users/jcursi/Sites/joncursi/redbird-web/node_modules/express/lib/router/layer.js:95:5)
W20170622-06:24:22.275(-4)? (STDERR)     at trim_prefix (/Users/jcursi/Sites/joncursi/redbird-web/node_modules/express/lib/router/index.js:317:13)
W20170622-06:24:22.276(-4)? (STDERR)     at /Users/jcursi/Sites/joncursi/redbird-web/node_modules/express/lib/router/index.js:284:7
W20170622-06:24:22.279(-4)? (STDERR)     at Function.process_params (/Users/jcursi/Sites/joncursi/redbird-web/node_modules/express/lib/router/index.js:335:12)
W20170622-06:24:22.279(-4)? (STDERR)     at next (/Users/jcursi/Sites/joncursi/redbird-web/node_modules/express/lib/router/index.js:275:10)
W20170622-06:24:22.280(-4)? (STDERR)     at /Users/jcursi/Sites/joncursi/redbird-web/node_modules/apollo-upload-server/dist/apollo-upload-server.js:74:52

from apollo-upload-client.

@giautm in a React Native project, would the additional devDependencies need to be installed with --save, or --save-dev? If you used --save-dev would the RN packager error for production installs of your project? Or do you only build locally, and deploy static builds? I don't know the RN ecosystem.

Once we work it out I will update the readme.

from apollo-upload-client.

@joncursi assuming the client is sending the right payload, that might be something to explore in apollo-upload-server. It looks like it is upset at the return next() here?

from apollo-upload-client.

@jaydenseric I just noticed that. Maybe I'm doing it wrong on the client. @giautm how are you getting at / uploading your image? Are you using react-native-fs to pick it up from the filesystem? Mind sharing a small code sample?

from apollo-upload-client.

@jaydenseric : Every things will bundle at build step to android.bundle.js. or android.ios.js. Just install them to devDependencies.

@joncursi : I just pass a variable to input like:

        return mutate({
          variables: {
            input: {
              ...input,
              clientMutationId,
              signature: input.signature,
              photos: input.photos,
            },
          },

input.photos is an arrray of shape: { uri: String, type: String, name: String }

from apollo-upload-client.

@joncursi : Variable look like this:

{
    "input": {
        "orderId": "VHJhbnNwb3J0T3JkZXI6NTkyYmUyNDRjZTRmYTkwYmJlYzg0Y2E3",
        "appointment": null,
        "cause": 8,
        "comment": null,
        "signature": [
            {
                "name": "file_0",
                "type": "image/png",
                "uri": "/Users/admin/Library/Developer/CoreSimulator/Devices/C02A708F-7003-4747-BB09-AA35530AFAC8/data/Containers/Data/Application/44243AD1-906B-4C2E-AC28-6D700BA99609/tmp/ReactABI17_0_0Native/CA1AD1AC-2B6D-47EB-9AE3-528A537E8AC7.png"
            }
        ],
        "photos": [],
        "timestamp": "2017-06-20T15:48:34.832Z",
        "clientMutationId": 1497973714832
    }
}

from apollo-upload-client.

Support has landed in v4.1.0.

Bugs or suggestions can be raised on new issues.

from apollo-upload-client.

Added a pr to fix having to install dev dependencies in RN, a high priority issue imo #23

from apollo-upload-client.