zackify / use-upload Goto Github PK

I've copy-pasted the following from the examples in the README (with some small formatting tweaks). However, tsc throws an error complaining about the client prop. I've done my best to follow the instructions from the README as closely as possible but I can't seem to get around this compilation error.

Code

import React, { useState } from 'react';
import { createGraphQLClient, UploadProvider, useUpload} from 'react-use-upload';
import gql from 'graphql-tag';

const client = createGraphQLClient({
  baseUrl: 'http://localhost:3000/graphql',
  modifyRequest: (request) => ({
    ...request,
    headers: {
      ...request.headers,
      authorization: `Bearer ${localStorage.getItem('token')}`,
    },
  }),
});

const uploadMutation = gql`
  mutation UploadFile($input: UploadFileInput!) {
    uploadFile(input: $input) {
      name
      randomField
    }
  }
`;

export const GraphQLUpload = () => {
  let [files, setFiles] = useState();

  let { loading, progress, error } = useUpload(files, {
    mutation: uploadMutation,
    variables: { input: { files, name: 'test' } },
  });

  return (
    <UploadProvider client={client}>
      <div style={{ marginBottom: 50 }}>
        <div>GraphQL Test</div>
        {loading ? (
          <div>Progress: {progress}</div>
        ) : error ? (
          <div>{error}</div>
        ) : (
          <input type="file" onChange={(e) => setFiles(e.target.files)} multiple />
        )}
      </div>
    </UploadProvider>
  );
};

Compilation Error:

Type '({ onProgress, options, }: GraphQLRequestOptions) => Promise<XHRResponse>' is not assignable to type 'XHRClient'.
  Types of parameters '__0' and 'args' are incompatible.
    Type 'XHRClientProps' is not assignable to type 'GraphQLRequestOptions'.
      Types of property 'options' are incompatible.
        Type 'XHROptions' is missing the following properties from type 'GraphQLOptions': mutation, variables, onProgress  TS2322

It would be great to have some live example / demo of this project.

The version currently published to npm still uses es6-import syntax.
Since most of the time a module bundler or test framework will not transpile node_modules. This leads to errors in environments that do not understand es6 imports.

In my case I would need to add custom jest transform just for this module.

I would propose to publish this module using commonJS + interop.

I have a use case where I'd like to attach an Authorization header but will need to invoke an async function to retrieve it. I can probably work around this by retrieving the value in advance but that is obviously not ideal. What I'd like is to be able to provide an async function for modifyRequest.

With that said, from looking at the code, it seems that modifyRequest actually modifies the options that are passed to the request "factory" function so it's possible that I'm just misunderstanding the intended use for modifyRequest.

Is there a callback for when the upload completes (irrespective of state). It seems weird to be monitoring progress and checking state to figure out if and when a file has been uploaded successfully if that's a point in a sequence of required actions.

Hey, was using your library today with TypeScript and the first argument to useUpload requires a FileOrFileList type, but does not accept null / undefined. I don't have the file yet when the component first mounts. I noticed that you check for files being null / undefined, so I think the type is wrong and needs to be updated to include null / undefined.

https://github.com/zackify/react-use-upload/blob/2d57e7da7dae7eb88789f400119180eda39cae8b/src/use-upload.tsx#L43-L52

now it just start uploading when i finish selecting the file.
But what I want is to select the file first then click button to start upload.