profile
viewpoint
Jayden Seric jaydenseric @bookwell Melbourne, Australia https://jaydenseric.com JS engineer, GraphQL multipart request (file uploads) spec author.

apollographql/apollo-link 1415

:link: Interface for fetching and modifying control flow of GraphQL requests

jaydenseric/apollo-upload-client 1004

A terminating Apollo Link for Apollo Client that allows FileList, File, Blob or ReactNativeFile instances within query or mutation variables and sends GraphQL multipart requests.

apollographql/apollo-fetch 582

:dog: Lightweight GraphQL client that supports middleware and afterware

jaydenseric/apollo-upload-examples 319

A full stack demo of file uploads via GraphQL mutations using Apollo Server and apollo-upload-client.

jaydenseric/Barebones 130

A barebones boilerplate for getting started on a bespoke front end.

jaydenseric/device-agnostic-ui 11

Device agnostic styles, components and hooks for Next.js.

jaydenseric/audit-age 7

An npx CLI utility for auditing the age of installed npm packages.

jaydenseric/coverage-node 7

A simple CLI to run Node.js and report code coverage.

jaydenseric/constraint-validation-buggyfill 5

Prevents invalid form submission in browsers that improperly support the HTML forms spec (i.e. Safari).

jaydenseric/eslint-config-env 5

ESLint config optimized for authoring packages that adapts to the project environment.

push eventjaydenseric/device-agnostic-ui-website

Jayden Seric

commit sha 8fe90b0af2670a09dbcc2a4b46da44d360a1d782

Fix the WordBreaks component example.

view details

push time in 3 days

push eventjaydenseric/device-agnostic-ui-website

Jayden Seric

commit sha c923d28403a9a64e38108710b3548834b39b3996

Fix the WordBreaks component example.

view details

push time in 3 days

issue commentapollographql/apollo-client

How to upload a file in V3

@dylanwulf

File uploads are actually not even a part of the official GraphQL specification document.

The GraphQL foundation doesn't have a spec ready yet for any form of requests, including the most commonly used POST requests. A working draft of a "GraphQL over HTTP" specification is being worked on by the GraphQL over HTTP working group (I'm an active member) here:

https://github.com/APIs-guru/graphql-over-http

We are standardizing GET and basic POST requests first, and will later look at things like multipart requests and maybe subscriptions. At that time I will strongly advocate for adoption of the GraphQL multipart request spec.

outerlook

comment created time in 4 days

delete branch jaydenseric/graphql-over-http

delete branch : patch-2

delete time in 5 days

delete branch jaydenseric/graphql-over-http

delete branch : patch-3

delete time in 5 days

delete branch jaydenseric/graphql-over-http

delete branch : patch-1

delete time in 5 days

push eventjaydenseric/graphql-over-http

Jayden Seric

commit sha dbd7c1f1970d587840820b1b8ae49fe1f3e4a883

Add Jayden Seric to the 2020-06-30 agenda

view details

push time in 5 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha 624a756cfb5ca91094e31d2961206d7fb094f50b

Remove unnecessary ESLint env comments.

view details

push time in 5 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha b5750ebdd79795240f96585b7a402f300a3de89a

Simplify audit descriptions.

view details

Jayden Seric

commit sha d5cffcf506416155862a02471a2b3e04f1d29f89

Work in progress.

view details

push time in 5 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha 43b8b4651e39e23a87c105e920cc0f572b455994

Add JSDoc for audit functions.

view details

push time in 5 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha 0ba07ff5e8cf2a6d49055af89b32833dbc207096

Update the EditorConfig.

view details

push time in 5 days

delete branch jaydenseric/graphql-http-test

delete branch : jaydenseric/universal-overhaul

delete time in 5 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha fc5c0df97e55211b81f651b0160fbf6c02dbe891

Work in progress.

view details

Jayden Seric

commit sha f2daa04c965a3a741cabff8f4d587ab4ed8e3f7c

Correct Accept header.

view details

Jayden Seric

commit sha d6d67891766ae2762b463b457893faf632dcd72c

Add auditPostRequestDetailed.

view details

Jayden Seric

commit sha 052f0687ab0eb4843e790401b3d608db39c32eb0

Update dev dependencies and supported Node.js versions.

view details

Jayden Seric

commit sha 8c25fd7bfe12855c7877028d9b156a3bdaa3fff3

Update the documentation.

view details

Jayden Seric

commit sha c616697590788e53adc66f8d93c370eade023cf8

Improve audit result reporting.

view details

Jayden Seric

commit sha d3e1b8cd1c452af51b628ea4d57f762315a90b1c

Remove the recordChildProcess test helper.

view details

Jayden Seric

commit sha 8fd3d07e98bb95fec8ea316fb734957eb46605e6

Improve CLI errors.

view details

Jayden Seric

commit sha 671d8f09ee57fcecaff1ade4c738378bab375fc1

Revert "Remove the recordChildProcess test helper." This reverts commit d3e1b8cd1c452af51b628ea4d57f762315a90b1c. I had forgotten that child_process.spawnSync is unusable in tests because it hangs.

view details

Jayden Seric

commit sha b26eccf47065d6657d25c2e4d80895060432adc2

Work in progress.

view details

push time in 5 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha b26eccf47065d6657d25c2e4d80895060432adc2

Work in progress.

view details

push time in 5 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha 671d8f09ee57fcecaff1ade4c738378bab375fc1

Revert "Remove the recordChildProcess test helper." This reverts commit d3e1b8cd1c452af51b628ea4d57f762315a90b1c. I had forgotten that child_process.spawnSync is unusable in tests because it hangs.

view details

Jayden Seric

commit sha 257f2b40cb7d4e35044468b4b9491938487f0ba1

Work in progress.

view details

push time in 5 days

issue commentjaydenseric/apollo-upload-client

File ignored when Object of class

If you have a suggestion for extract-files, please raise an issue in that repo:

https://github.com/jaydenseric/extract-files

Keep in mind it is fairly battle tested, and quite a bit of thought went into a lot of the JavaScript gotchas that exist:

https://github.com/jaydenseric/extract-files/blob/79815bf37652b10607ad1e8c9d82a6c988d0d139/src/test/lib/extractFiles.test.mjs#L6-L19

Perhaps better than an issue is to try implementing your suggestions and if it tests ok, raise a PR for discussion.

David-Wennemaring

comment created time in 5 days

issue commentjaydenseric/apollo-upload-client

File ignored when Object of class

However in the application I'm building the Object is bigger and the file is nested deep in this Object. Additionally I don't have the possibility to change the API and move the position of the file to the top.

It doesn't really matter how nested the file is, you can write your own helper function that converts the object into something suitable for GraphQL variables. It could be recursive if the structure is not predictable.

One way:

const foo = {
  a: 'whatever',
  b: {
    a: 'whatever',
    b: new Special({
       a: 'whatever',
       b: new FileWrapper(file)
    })
  }
}
const variables = {
  ...foo,
  b: {
    ...foo.b,
    b: {
       a: foo.b.b.a,
       b: foo.b.b.b.file
    }
  }
}
David-Wennemaring

comment created time in 5 days

issue closedjaydenseric/apollo-upload-client

File ignored when Object of class

I have a problem when uploading files when they are inside an object of a class. I'm not sure if this is the correct location for this issue, or if it is related to vue-apollo.

When I do something like this in a mutation, the file is not sent in the request.

variables:{
  data: new FileWrapper(file)
}

When I do it like this, it is working as expected

variables: {
  data:{
    file
 }
}

Here is a stackblitz to reproduce the problem: https://stackblitz.com/edit/typescript-3j41bk Checkout the content of the request in the network tab of the browser.

I hope you can help me.

closed time in 5 days

David-Wennemaring

issue commentjaydenseric/apollo-upload-client

File ignored when Object of class

After looking at your code demo, I think your best option is to manually unwrap:

const wrappedFile = new FileWrapper(file)
const variables = {
  data: wrappedFile.file
};
David-Wennemaring

comment created time in 5 days

issue commentjaydenseric/apollo-upload-client

File ignored when Object of class

It's a pretty uncommon situation, to have a file wrapped like that. Probably the best option is to manually unwrap the file when constructing variables.

Another option is to specify the isExtractableFile option when using createUploadLink. Here is an example:

https://github.com/jaydenseric/apollo-upload-client#type-extractablefilematcher

Note that once you get the file to extract ok, the global FormData implementation still needs to be able to append that type of file to the form. Try it out and see if it works, I'm not sure what will happen.

David-Wennemaring

comment created time in 5 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha 8fd3d07e98bb95fec8ea316fb734957eb46605e6

Improve CLI errors.

view details

push time in 6 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha d3e1b8cd1c452af51b628ea4d57f762315a90b1c

Remove the recordChildProcess test helper.

view details

push time in 6 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha c616697590788e53adc66f8d93c370eade023cf8

Improve audit result reporting.

view details

push time in 6 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha 8c25fd7bfe12855c7877028d9b156a3bdaa3fff3

Update the documentation.

view details

push time in 6 days

push eventjaydenseric/graphql-http-test

Jayden Seric

commit sha 052f0687ab0eb4843e790401b3d608db39c32eb0

Update dev dependencies and supported Node.js versions.

view details

push time in 6 days

issue commentyamafaktory/shrimpit

Doesn't resolve index.js files correctly

The strategy is to not attempt to guess the absolute import file paths at the time they are discovered, but to record the import specifiers more faithfully:

{
- "location": "test/core/b/b.js",
+ "location": "test/core/b/b",
   "name": "test",
   "unnamedDefault": true,
}

The later when analysing what exports are unused, search for the files in the list, resolving file extensions and index files in order of preference (it's good to match the Node.js resolution algorithm).

Rather than do a fork and draft PR, here are the relevant diffs (minus updated tests and snapshots)…

https://github.com/yamafaktory/shrimpit/blob/64866939edf724f0aacd2fb39373241fe36d03b6/lib.js#L282

     const { exports, imports } = this.modules
     const unresolved = exports.reduce((acc, item) => {
       if (
-        imports.filter(element =>
-          element.unnamedDefault
+        imports.filter(imprt =>
+          imprt.unnamedDefault
             ? // Skip the name in the comparison as a default unnamed export
               // can be imported with any name.
               // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
               this.deepStrictEqual(
-                { location: element.location, unnamedDefault: true },
+                { location: `${imprt.location}.js`, unnamedDefault: true },
                 {
                   location: item.location,
                   unnamedDefault: item.unnamedDefault,
                 },
               )
             : // Compare the raw element & item.
-              this.deepStrictEqual(element, item),
+              this.deepStrictEqual(
+                {
+                  ...imprt,
+                  location: `${imprt.location}.js`,
+                },
+                item,
+              ),
+        ).length === 0 &&
+        imports.filter(imprt =>
+          imprt.unnamedDefault
+            ? this.deepStrictEqual(
+                {
+                  location: `${imprt.location}${path.sep}index.js`,
+                  unnamedDefault: true,
+                },
+                {
+                  location: item.location,
+                  unnamedDefault: item.unnamedDefault,
+                },
+              )
+            : this.deepStrictEqual(
+                {
+                  ...imprt,
+                  location: `${imprt.location}${path.sep}index.js`,
+                },
+                item,
+              ),
         ).length === 0
       ) {
         acc.push(item)

That's not the best way to write it; this was just my work in progress to patch the way the code currently works.

https://github.com/yamafaktory/shrimpit/blob/64866939edf724f0aacd2fb39373241fe36d03b6/lib.js#L410

     const getLocation = location =>
-      this.joinPaths(
-        this.getDir(extPath).join(path.sep),
-        location + this.getExt(extPath),
-      )
+      path.join(this.getDir(extPath).join(path.sep), location)

A side note: I avoided using this.joinPaths; it's better to path.join directly. Unhelpful methods like this could be removed to simplify the code and make it easier to understand what's going on:

https://github.com/yamafaktory/shrimpit/blob/64866939edf724f0aacd2fb39373241fe36d03b6/lib.js#L207-L209

I think namespace imports were not working at the time I abandoned the effort? I'm struggling to remember to be honest it was a few weeks ago.

jaydenseric

comment created time in 6 days

issue commentjaydenseric/graphql-upload

File/Blob data sent as variable does not support inside the resolver

None of that server code looks right. Did you read the instructions?

Inside the resolver uploadImage const uploadImage = async input => {

That is not the signature of a mutation resolver. Mutation arguments are the second function argument. Either your code is wrong, or you are not communicating clearly.

const data = input.image.file

Your mutation argument is called image, so why are you using .file? That's not the GraphQL upload API.

Where are you awaiting the upload, and where are you running createReadStream?

const buffer = Buffer.from(JSON.stringify(input));

Why do you expect to be able to JSON stringify a binary file read stream.

I think you need to go back to the start and read the instructions carefully.

mittalyashu

comment created time in 6 days

issue commentpalantir/tslint

Feature Request: Dead Code Detection

find-unused-exports was recently published, A Node.js CLI and equivalent JS API to find unused ECMAScript module exports in a project.

It's not specific to TypeScript; it parses project files using Babel (respecting your project’s Babel config). It supports ignoring specific exports known to be unused (e.g. the default export for a Next.js page) via ignore comments, making the tool fit for use in a test script for CI. It has been a bit of a game changer at work; reviewing PRs is less taxing now we don't have to do a lot of manual scanning to verify there are no orphaned or unused exports. It's very fast too. The npx find-unused-exports script is handy for finding redundant code to remove in legacy projects.

<img width="300" alt="find-unused-exports CLI screenshot" src="https://user-images.githubusercontent.com/1754873/86077837-16ff1080-bad0-11ea-876e-4b791da4315f.png" />

blakeembrey

comment created time in 6 days

issue commentjaydenseric/apollo-upload-client

Support @apollo/client v3

In addition to waiting for Apollo to release v3, you can track these PRs:

  • https://github.com/jaydenseric/apollo-upload-client/pull/175
  • https://github.com/apollographql/apollo-client/pull/6109
mackattack3k

comment created time in 6 days

issue commentyamafaktory/shrimpit

Doesn't resolve index.js files correctly

I got started on a Shimpit PR that fixed most of the problems with index files, but gave up before getting every type of import/export to work. If you're interested, I might be able to share what I had in a draft PR.

jaydenseric

comment created time in 6 days

issue commentyamafaktory/shrimpit

Doesn't resolve index.js files correctly

I ended up writing from scratch and publishing find-unused-exports; A Node.js CLI and equivalent JS API to find unused ECMAScript module exports in a project.

It can resolve index files, custom extensions, etc. One thing I was not expecting was for it to be so fast — find-unused-exports takes less than a second for our project. For some reason Shrimpit takes quite a few minutes.

jaydenseric

comment created time in 6 days

issue closedjaydenseric/graphql-upload

File/Blob data sent as variable does not support inside the resolver

I tried sending the File constructor or even tried converting to File object to blob using it inside the mutation as a variable.

But in the I get the data from the resolver in this format:

{ resolve: [Function],
  reject: [Function],
  promise:
   Promise {
     { filename: 'tumblr_d33bd9ecbbd25a9417e96e0c2ae70f17_d068b0da_500.png',
       mimetype: 'image/png',
       encoding: '7bit',
       createReadStream: [Function: createReadStream] } },
  file:
   { filename: 'tumblr_d33bd9ecbbd25a9417e96e0c2ae70f17_d068b0da_500.png',
     mimetype: 'image/png',
     encoding: '7bit',
     createReadStream: [Function: createReadStream] } }

While trying to use this with aws-sdk package, it shows error

[InvalidParameterType: Expected params.documents to be a string, Buffer, Stream, Blob, or typed array object]

I am not sure if the graphql-upload data type is sending the correct data type.

closed time in 6 days

mittalyashu

issue commentjaydenseric/graphql-upload

File/Blob data sent as variable does not support inside the resolver

This question is worded in a very confusing way. I'm sure if you follow the setup instructions carefully on the client and server you will be able to get it all working; most of us successfully use the AWS SDK to store uploads.

If you get really stuck, social media or forums are better places to ask for help with your project. As a guess, you haven't setup the Upload scalar correctly in your schema on the server.

In this repo you are always welcome to raise a GitHub issues to report a reproducible bug or request a feature.

mittalyashu

comment created time in 6 days

push eventjaydenseric/extract-files

Jayden Seric

commit sha 79815bf37652b10607ad1e8c9d82a6c988d0d139

Remove Node.js v13 and add v14 to the versions tested in GitHub Actions.

view details

push time in 7 days

push eventjaydenseric/extract-files

Jayden Seric

commit sha b08157ab9e996d27df8a627a81aea3bb67905cd6

Improve JSDoc code examples.

view details

Jayden Seric

commit sha 5de93b2c6b2495353b230df9a809e8103a605138

Update dev dependencies and supported Node.js versions.

view details

Jayden Seric

commit sha d05127367385433df1a98fd00c037c62f69e443a

Update EditorConfig.

view details

push time in 7 days

push eventjaydenseric/apollo-upload-client

Jayden Seric

commit sha 295ee1e15b8c5649da4dd40f6fe9b16ad23df185

Remove Node.js v13 and add v14 to the versions tested in GitHub Actions.

view details

Jayden Seric

commit sha b7d876042ad9d991548c26d349bf276e52148a0e

Tidy code examples.

view details

Jayden Seric

commit sha 7e605324a6fa3c2a621c7d7444e4175aff737e2a

Updated dependencies and supported Node.js versions.

view details

Jayden Seric

commit sha ea0f536098e5fbd70f361d45cb70bc8f16b0a01a

Update EditorConfig.

view details

push time in 8 days

push eventjaydenseric/apollo-upload-client

Adrien Cohen

commit sha 336691cec6698661ab404649e4e8435750255803

Add graphql to peerDependencies

view details

Jayden Seric

commit sha fa8a863e2d56c9b46b2929a0d30a600904a1c9e0

Reorder package fields.

view details

Jayden Seric

commit sha 62302f36be173d9479f23f68cc4843f44025ae37

Update the changelog.

view details

Jayden Seric

commit sha b52dfb2cf6171003f59fde2d3d51f54d5b427948

Merge pull request #196 from adriencohen/master Add graphql to peerDependencies.

view details

push time in 8 days

PR merged jaydenseric/apollo-upload-client

Add graphql to peerDependencies

Quick PR to support yarn berry. As apollo-link and apollo-link-http-common have graphql as a peerDependencies this package should also have it

+9 -0

2 comments

2 changed files

adriencohen

pr closed time in 8 days

push eventadriencohen/apollo-upload-client

Jayden Seric

commit sha fa8a863e2d56c9b46b2929a0d30a600904a1c9e0

Reorder package fields.

view details

Jayden Seric

commit sha 62302f36be173d9479f23f68cc4843f44025ae37

Update the changelog.

view details

push time in 8 days

issue closedjaydenseric/graphql-upload

Upload scalar return empty object as resolver argument

Schema

scalar Upload

type Mutation {
  uploadImage(image: Upload): Image
}

Resolver

This is the resolver to import Upload scalar

const { GraphQLUpload } = require('graphql-upload');

module.exports = {
  Upload: GraphQLUpload
}

Resolver to handle image upload

const uploadImage = input => {
  const data = { ...input }
  console.log(data)

  // upload to image server
}

module.exports = {
  uploadImage
}

The Data variable return { image: {} }

closed time in 8 days

mittalyashu

issue commentjaydenseric/graphql-upload

Upload scalar return empty object as resolver argument

That doesn't look like a multipart request; your problem is on the client. Setup your client to send the right requests; here are a list of client implementations to choose from:

https://github.com/jaydenseric/graphql-multipart-request-spec#client

mittalyashu

comment created time in 8 days

issue commentjaydenseric/graphql-upload

Upload scalar return empty object as resolver argument

You should have already verified that the front end is sending a valid GraphQL multipart request, so it is irrelevant at this point.

mittalyashu

comment created time in 8 days

issue commentjaydenseric/graphql-upload

Upload scalar return empty object as resolver argument

If in the server project you run npm ls graphql-upload, is there only one version installed? If not, you need to make sure that only once version is being used so that the middleware and scalar can work together properly.

mittalyashu

comment created time in 8 days

issue commentjaydenseric/graphql-upload

Upload scalar return empty object as resolver argument

First, make sure the client is sending a valid GraphQL multipart request to the server. Use the Chrome dev tools network inspector to verify this.

Secondly, make sure the graphqlUploadKoa or graphqlUploadExpress middleware is setup correctly.

Make sure no other middleware is parsing the multipart request, particularly before the graphql-upload middleware.

mittalyashu

comment created time in 9 days

issue commentjaydenseric/apollo-upload-client

Upload image from React Native to Apollo Server not working?

@PritishSawant

I'll go with the rest api way for now till Graphql upload matures more in future

You'll be waiting for React Native to fix their bugs and gotchas; nothing needs to change regarding this implementation of the GraphQL multipart request spec, which uses web standard FromData and fetch requests. Some of their gotchas, like having dev tools open causing multipart requests to fail, will cause you problems regardless if you were uploading via GraphQL or REST.

PritishSawant

comment created time in 9 days

issue commentgraphql-python/graphene-django

Overzealous input validation for batching

To support batching and file multipart file uploads.

Note that the GraphQL multipart request spec supports file uploads with batching:

https://github.com/jaydenseric/graphql-multipart-request-spec#batching

apollo-upload-client only doesn't do this because an Apollo Client implementation is tricky (see https://github.com/jaydenseric/apollo-upload-client/issues/34#issuecomment-358830808), I don't have the time to work on it and no one else has stepped up to the plate (https://github.com/jaydenseric/apollo-upload-client/issues/34#issuecomment-376818641).

A GraphQL server will ideally accept batched and unbatched requests, for both regular and multipart requests.

McPo

comment created time in 9 days

PR closed jaydenseric/apollo-upload-client

windows support

Very helpful for windows developers.

+2 -1

3 comments

1 changed file

yaacovCR

pr closed time in 9 days

pull request commentjaydenseric/apollo-upload-client

windows support

What else needs to be changed?

Double quotes for globs, line endings, updating CI to test on Windows, etc.

Thanks again for your work, but I think this is not something I'm keen on at this time. If I change my mind about it I will consistently roll out and CI test Windows support across all of the packages I maintain, not just this one.

yaacovCR

comment created time in 9 days

issue closedjaydenseric/apollo-upload-client

new ReactNativeFile Error: Network error: Network request failed

I cannot upload images from the mobile application, I have integrated from the web and it works WhatsApp Image 2020-05-03 at 1 12 41 AM

closed time in 9 days

laugustol

issue commentjaydenseric/apollo-upload-client

new ReactNativeFile Error: Network error: Network request failed

It seems this problem has an answer, and updated documentation will make it easier for people to avoid such gotchas:

https://github.com/jaydenseric/apollo-upload-client/pull/193

laugustol

comment created time in 9 days

issue closedjaydenseric/apollo-upload-client

Upload image from React Native to Apollo Server not working?

This is not a bug with the library but a question from my side

I have created my backend with Nodejs and Apollo Server. I am trying to upload an image from my React Native client. Here is my backend code

Mutation: {
    async singleUpload(_, { fileInput: { file, fileName } }) {
      try {
        const { createReadStream, filename, mimetype } = await file;
        const stream = createReadStream();
        const path = `./upload/${filename}`;

        const tempFile = { id: 123, filename, mimetype, path };
        await new Promise((resolve, reject) => {
          const writeStream = createWriteStream(path);

          // When the upload is fully written, resolve the promise.
          writeStream.on("finish", resolve);

          // If there's an error writing the file, remove the partially written file
          // and reject the promise.
          writeStream.on("error", (error) => {
            unlink(path, () => {
              reject(error);
            });
          });

          // In node <= 13, errors are not automatically propagated between piped
          // streams. If there is an error receiving the upload, destroy the write
          // stream with the corresponding error.
          stream.on("error", (error) => writeStream.destroy(error));

          // Pipe the upload into the write stream.
          stream.pipe(writeStream);
        });
        ...then upload it to Firebase Storage

When I use Altair plugin for Firefox browser to upload image , it works fine.

Now for my React Native client, I am using apollo-upload-client lib. After a user picks image using the Image Picker plugin for React Native , I am creating a file

const file = new ReactNativeFile({
            uri: image.uri,
            type: image.type,
            name: 'Hi there',
          });

Now when I upload it I get an error saying from my backend saying TypeError: createReadStream is not a function which I understand as there is no createReadStream parameter in my ReactNativeFile

so I decided to change my backend code to something like this

const { name, type } = await file;
        console.log("Mime" + type);
        const stream = fs.createReadStream(name);

fs module is from nodejs Now when I try uploading image from Altair or from React Native , I get an error saying

[Error: ENOENT: no such file or directory,

Due to my lack of knowledge of backend I am not sure what is causing the issue. I think if I try uploading it from ReactJS instead of React Native, my code might work for the backend. But the image picker for browser and native mobile are very much different and I have not tried doing with ReactJS for now

I am following this article moon highway for my backend code

closed time in 9 days

PritishSawant

issue commentjaydenseric/apollo-upload-client

Upload image from React Native to Apollo Server not working?

Sorry to hear you've been having a hard time with React Native; it is a real hassle to work with. I don't have time to answer usage questions about it, sorry.

The solution to your problems is most likely in one of the 28 issues mentioning "react native":

https://github.com/jaydenseric/apollo-upload-client/search?q=react+native&type=Issues

Please make not of this documented tip:

Be aware that inspecting network requests with Chrome dev tools interferes with the React Native FormData implementation, causing network errors.

https://github.com/jaydenseric/apollo-upload-client#type-reactnativefilesubstitute

And have a read of this updated tip:

https://github.com/jaydenseric/apollo-upload-client/pull/193/files

Common gotchas a lot of React Native people have is not giving the right name, uri, or type when constructing a new ReactNativeFile.

PritishSawant

comment created time in 9 days

pull request commentjaydenseric/apollo-upload-client

Add graphql to peerDependencies

I'm not so sure, graphql is not imported or directly used anywhere in this codebase.

What specific problem would this PR alleviate? I'm not familiar what it has to do with Yarn berry.

adriencohen

comment created time in 9 days

issue commentjaydenseric/graphql-react

Caching on mount queries

I was wondering if there is a way to cache a query, even when after unmounting

Queries are always cached. I think what you are wondering, is if there is a way to only fetch a query the first time, and from then on, just render the cache and don't refetch. This is the way Apollo works out of the box, and it's what people coming from Apollo are familiar with.

In short, no. After a lot of experience with the cache based approach in Apollo, I came to see it as not a good idea. I have given 45 minute talks on why it's not a good idea, and why graphql-react has the API design that it does - I don't really have the time to explain it in depth here now, sorry.

The graphql-react API makes it easy to only query data you need to render a given UI (e.g. no need to query id fields for caching, or have big mutation payloads to attempt to guess and update the cache used in other screens) and render that cache optimistically while it's refreshing. If a mutation happens that you know causes cache to become stale, the best approach is to trigger the mounted components to all refresh, and optionally wipe the cache for queries that are not currently mounted too. The Apollo approach of attempting to manually update the global cache after mutations is totally impractical, and in many situations, impossible. It has led to spaghetti code (no separation of concerns between components), overfetching, and cache staleness bugs every in every single Apollo app I have ever worked on.

I have discussed with friends about updating the graphql-react API to have a fetch-if-no-cache type option, but I honestly don't want to encourage the pattern.

In the old school server side rendered web, users expected that when they navigate to a page, they are loading a fresh version of that page. Too many apps today allow you to navigate around without actually refreshing anything and users notice the staleness. E.g. they create a thing, navigate back to a dashboard, and notice their activity statistics have not updated — so they manually refresh the page. These sorts of problems.

Grsmto

comment created time in 9 days

issue commentbmatcuk/eslint-plugin-postcss-modules

Support composition

Perhaps postcss-modules-extract-imports is part of the solution?

jaydenseric

comment created time in 9 days

issue openedbmatcuk/eslint-plugin-postcss-modules

Support composition

At the moment, the composes: syntax for composition is not supported in 2 ways:

  1. Falsely reports composes: classes as unused. Possibly related to https://github.com/bmatcuk/eslint-plugin-postcss-modules/issues/7 ?
  2. The composes: className from './file.css' syntax to import specific classes for composition (see the CSS Modules “Composing from other files” docs).

created time in 9 days

issue commentjaydenseric/apollo-upload-client

question

Thank for the update! Glad you got it working in the end :)

smolleyes

comment created time in 9 days

issue commentjaydenseric/graphql-api-koa

Resolver error status code is not respected

You can see this behavior is tested for both unexposed and exposed resolver errors:

  • https://github.com/jaydenseric/graphql-api-koa/blob/ffcb0e0d99810780dc4bd2cb9a2b4c353fb938ba/test/public/execute.test.js#L1310
  • https://github.com/jaydenseric/graphql-api-koa/blob/ffcb0e0d99810780dc4bd2cb9a2b4c353fb938ba/test/public/execute.test.js#L1387
vladshcherbin

comment created time in 10 days

issue closedjaydenseric/graphql-api-koa

Resolver error status code is not respected

Hey 👋

When error is thrown in middleware its status code is used in response. However, when same error is thrown in resolver its status code doesn't affect response.

This feels strange and is probably why other libraries don't use custom http status codes in response 🤔

closed time in 10 days

vladshcherbin

issue commentjaydenseric/graphql-api-koa

Resolver error status code is not respected

Because GraphQL resolver errors are not supposed to affect the HTTP status code; a 200 response is required (soon to be by spec).

vladshcherbin

comment created time in 10 days

issue openedbmatcuk/eslint-plugin-postcss-modules

Falsely reports animation keyframes as unused classes

If a CSS module has animation keyframes named for example fadeIn, and in the same module the keyframes are used via animation-name: fadeIn;, the postcss-modules/no-unused-class rule incorrectly reports the keyframes name as an unused class:

Screen Shot 2020-06-26 at 10 56 22 am

created time in 10 days

issue commentmscdex/busboy

Prioritize text fields over file fields?

The server can't control the order that the client sends multipart form fields/files. I'm not sure what your asking for here; busboy is a server package.

The fields can be ordered on the client, which should solve your problem. The GraphQL multipart request spec for example mandates the order of fields the client sends:

https://github.com/jaydenseric/graphql-multipart-request-spec#multipart-form-field-structure

yaneony

comment created time in 11 days

issue commentReactTraining/history

history.listen() v4 -> v5 compatibility

I'm ok with breaking changes, what is frustrating is that this very breaking change is not mentioning in the v5.0.0 release notes under “Breaking Changes”:

https://github.com/ReactTraining/history/releases/tag/v5.0.0

richardgorman

comment created time in 11 days

issue commentsindresorhus/globby

Path *** is not in cwd ***

@navoneel07 I can't remember anything about this problem, sorry!

fjc0k

comment created time in 11 days

created tagjaydenseric/find-unused-exports

tagv1.1.0

A Node.js CLI and equivalent JS API to find unused ECMAScript module exports in a project.

created time in 12 days

release jaydenseric/find-unused-exports

v1.1.0

released time in 12 days

push eventjaydenseric/find-unused-exports

Jayden Seric

commit sha 3208426379b6f70c7267a165e1aac7728fca2808

Version 1.1.0.

view details

push time in 12 days

push eventjaydenseric/find-unused-exports

Jayden Seric

commit sha 052721aac753f6bf877bcbc8938a9743cb4d90cb

Support ignore unused exports comments.

view details

push time in 12 days

push eventjaydenseric/find-unused-exports

Jayden Seric

commit sha ffeccd292aec839bd1dd66ef1064030c72900532

Update dev dependencies.

view details

push time in 12 days

release jaydenseric/find-unused-exports

v1.0.1

released time in 13 days

created tagjaydenseric/find-unused-exports

tagv1.0.1

A Node.js CLI and equivalent JS API to find unused module exports in a project.

created time in 13 days

push eventjaydenseric/find-unused-exports

Jayden Seric

commit sha 45dc1e3ae0938f9fb99cbf123cdc00c8ddef88bf

Version 1.0.1.

view details

push time in 13 days

push eventjaydenseric/find-unused-exports

Jayden Seric

commit sha 634aeeeba7d3e62caf69a351e379c9185d82f245

Fix some find-unused-exports CLI snapshot tests.

view details

push time in 13 days

startedjaydenseric/find-unused-exports

started time in 13 days

created tagjaydenseric/find-unused-exports

tagv1.0.0

A Node.js CLI and equivalent JS API to find unused module exports in a project.

created time in 13 days

release jaydenseric/find-unused-exports

v1.0.0

released time in 13 days

create barnchjaydenseric/find-unused-exports

branch : master

created branch time in 13 days

created repositoryjaydenseric/find-unused-exports

A Node.js CLI and equivalent JS API to find unused module exports in a project.

created time in 14 days

startedbmatcuk/eslint-plugin-postcss-modules

started time in 14 days

issue closedbmatcuk/eslint-plugin-postcss-modules

Errors and warnings don't go away once fixed

For some reason I can't figure out, errors and warnings don't go away once they are fixed by changes to the imported CSS file.

This happens when using the ESLint CLI, so it's not just an issue with the VS Code ESLint extension.

Is there some sort of caching going on, that is not being updated after the first lint?

closed time in 14 days

jaydenseric

issue commentbmatcuk/eslint-plugin-postcss-modules

Errors and warnings don't go away once fixed

That seems to have solved the problem; thanks for sorting it out!

jaydenseric

comment created time in 14 days

created tagjaydenseric/eslint-config-env

tagv14.0.4

ESLint config optimized for authoring packages that adapts to the project environment.

created time in 14 days

release jaydenseric/eslint-config-env

v14.0.4

released time in 14 days

push eventjaydenseric/eslint-config-env

Jayden Seric

commit sha 1e8a27042780fff534c1698312ef7c28c6160e0e

Version 14.0.4.

view details

push time in 14 days

push eventjaydenseric/eslint-config-env

Jayden Seric

commit sha 4d591c954915850c1055f013383219bb6b86dfb2

Update peer and dev dependencies

view details

push time in 14 days

issue commentbmatcuk/eslint-plugin-postcss-modules

Errors and warnings don't go away once fixed

Ok, so I've narrowed a few things down.

Today I can't reproduce the issue purely using the ESLint CLI - I'm not sure if this is due to recent changes in my project or if I was initially mistaken.

This issue is reproducible with the VS Code ESLint extension:

  1. Have a component correctly import and use a class from CSS module file.
  2. Rename the class in the CSS file.
  3. Reopen the JS file, and note that it doesn't lint the incorrect use of the old class name as an error.

Basically, one the VS Code project has been opened eslint-plugin-postcss-modules caches the classes in a CSS module file until VS Code is restarted, at which point it constructs a fresh cache the first time the JS file importing the CSS file is opened.

I'm quite sure the bug relates to the internal caching eslint-plugin-postcss-modules has; it's not a problem with the VS Code ESLint extension.

If you change this line to disable caching, the problem can be "fixed":

https://github.com/bmatcuk/eslint-plugin-postcss-modules/blob/master/lib/rules/common/cache.ts#L156

     const classes =
       Cache.filenameToClasses[filename] !== undefined
-        ? Cache.filenameToClasses[filename]
+        ? this.parser.parse(filename)
         : this.parser.parse(filename)
jaydenseric

comment created time in 15 days

issue commentbmatcuk/eslint-plugin-postcss-modules

Errors and warnings don't go away once fixed

I took a break from coding yesterday (Saturday), but today I'll try to figure this one out.

jaydenseric

comment created time in 15 days

issue commentbmatcuk/eslint-plugin-postcss-modules

Errors and warnings don't go away once fixed

.postcssrc.json:

{
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-custom-properties": {},
    "postcss-flexbugs-fixes": {},
    "autoprefixer": {}
  }
}
jaydenseric

comment created time in 16 days

issue commentbmatcuk/eslint-plugin-postcss-modules

Errors and warnings don't go away once fixed

Yes, it doesn't seem to be related to any editor extensions because I get identical results with the CLI.

jaydenseric

comment created time in 16 days

issue commentbmatcuk/eslint-plugin-postcss-modules

Errors and warnings don't go away once fixed

None of the other eslint plugins exhibit this issue, only this one.

jaydenseric

comment created time in 16 days

issue commentjpuri/html-to-draftjs

window is undefined

Duplicates https://github.com/jpuri/html-to-draftjs/issues/78 .

aberba

comment created time in 16 days

issue openedbmatcuk/eslint-plugin-postcss-modules

Errors and warnings don't go away once fixed

For some reason I can't figure out, errors and warnings don't go away once they are fixed by changes to the imported CSS file.

This happens when using the ESLint CLI, so it's not just an issue with the VS Code ESLint extension.

Is there some sort of caching going on, that is not being updated after the first lint?

created time in 17 days

startedzgoat/goatcounter

started time in 17 days

startedDylanPiercey/spawn-server-webpack-plugin

started time in 18 days

issue openedwix/eslint-plugin-lodash

chaining rule doesn’t work when chain is imported from lodash/chain

The lodash/chaining rule doesn’t work when using a deep import, which is a best practice for bundle-size:

import chain from 'lodash/chain'

It only works when chain is imported as a named import from lodash:

import { chain } from 'lodash'

Or when _.chain is used from the main default import:

import _ from 'lodash'

_.chain(
  // …
) // …

created time in 18 days

startedbenawad/type-graphql-series

started time in 18 days

issue commentapollographql/eslint-plugin-graphql

Support /* GraphQL */ comment tags

@rigelglen see the fake-tag “Why not String.raw?” readme section:

This may be temptingly simple:

const gql = String.raw
const QUERY = gql`
  {
    foo
  }
`

However, it doesn’t unescape characters. For the usage example, if you console.log(typeDefs) > before and after replacing the import with const gql = String.raw you will see the difference in > the type description markdown:

    "A foo."
    type Foo {
-     "The `Foo` ID."
+     "The \`Foo\` ID."
      id: ID!
    }
jaydenseric

comment created time in 18 days

startedyou-dont-need/You-Dont-Need-Lodash-Underscore

started time in 18 days

issue commentjpuri/react-draft-wysiwyg

ES build system

A package published to npm should never-ever have a main field that points to a JS file that is a bundle containing dependencies. Common sense tells you that if any other dependency in your project, or your project itself, uses the same dependencies they can't be shared - you end up with massive duplicated bloat in your project's bundle.

The only reason to include a bundle in a package published to npm is to allow the package to be used in a browser via a CDN URL in a script tag (a terrible idea in itself) - but this should not be what the package main field points to.

dmtrKovalenko

comment created time in 19 days

more