benawad / apollo-server-react-file-upload Goto Github PK

Hi Ben
Thanks for so many tutorial!
I have created an Apollo Client with JWT from your video https://www.youtube.com/watch?v=25GS0MLT8JU

And I would like to use this upload link, but I'm not sure how to compose links with this and I couldn't find some related practice.
May I know that is this uploadLinks possible to concat links like

const uploadLink = createUploadLink({ uri: MY_GRAPHQL_ENDPOINT })
const client = new ApolloClient({
    link: ApolloLink.from([
      new TokenRefreshLink({
        ...),
      requestLink,
      uploadLink
    ]),
    cache: new InMemoryCache()
  })

  return client
}

It seems not works as I expected.
I'm new to React and GraphQL so I'm not sure is it proper to inquire this issue here.
If it's not,please tell me and I will delete it immediately.
I appreciate your kindness!
Thank you

Description

Server crashes with Error: ENOENT: no such file or directory, open ...

Steps to reproduce

Reproduce the issue: clone the repository, change directory into the server folder, install dependencies via yarn and run the app via yarn start. As soon as the webapp sends an image the server crashes with error: Error: ENOENT: no such file or directory, open ...

Probably opinionated, but it would be nice that server works without manually creating an image directory upfront.

Environment

Ubuntu 18.04.2 LTS

Description

App crashes with Module not found: Can't resolve 'graphql/language/parser'

Steps to reproduce

Reproduce the issue: clone the repository, change directory into the web folder, install dependencies via yarn and run the app via yarn start. This lets the app crash with error: Module not found: Can't resolve 'graphql/language/parser' in ...

The issue seems to be that graphql-tag has a peer dependency to graphql, which is not available in the node_modules folder.

Environment

Ubuntu 18.04.2 LTS

Hi!

First, thanks for your tutorial on Youtube! It was great. Though, I can't seem to fix one problem when using createReadStream and the bucket storage.

When uploading the image to firebase, the image is broken and I'm not able to preview it in the Firebase Console. All I can see is an error saying Error loading preview. But the filesize, mimetype and accessToken are being uploaded, so i'm doing something right.

Here's the part of my Resolver function where i'm uploading an image:

PS. The bucket comes from an Apollo datasource, that's why I can access it using this.

 const { createReadStream, filename, mimetype } = image;

  try {
    await new Promise((res, rej) =>
      createReadStream()
        .pipe(
          this.bucket.file(filename).createWriteStream({
            resumable: false,
            gzip: true,
            metadata: {
              contentType: mimetype,
              metadata: {
                firebaseStorageDownloadTokens: uuidv4(),
              },
            },
          })
        )
        .on("finish", res)
        .on("error", rej)
    );
    return filename;
  } catch (err) {
    return new Error(err)
  }

Do you have any suggestions?

I would really appreciate your help. I've been googling for 2 days now :(

Hello Ben!
I have a problem when i run this application. after selecting the image, it says Maximum call stack size exceeded and server crashes.

I'm trying to implement your solution to my project but there is one problem but I'm not sure how to fix it.
I'm using exact same codes as yours but I m only getting
{ path: 'example.jpeg' }

when I try yours you get all options
{ fileName: 'example.jpeg' mimeType: 'image/png' encoding: '7bit' createReadStream: [Function: createReadStream] }

I don't know if its about react or node.

Getting the error.

the drag and drop images text is coming but it quickly redirecting to this error in react web page. Cloud you please help me on this?

I have changed the react-scripts version to "react-scripts": "2.1.8" in package.json file of web.