@os-team/relay-network-mw-upload-progress

The middleware for @os-team/relay-network-creator to track upload progress.

Usage

Step 1. Install the package

Install the package using the following command:

yarn add @os-team/relay-network-mw-upload-progress

Step 2. Add the middleware

1import createRelayNetwork from '@os-team/relay-network-creator';
2import uploadProgress from '@os-team/relay-network-mw-upload-progress';
3
4createRelayNetwork({
5  url: 'https://api.domain.com/graphql',
6  middlewares: [uploadProgress],
7});

Step 3. Pass the progress callback to mutation variables

1const FileUpload: React.FC = () => {
2  const [progress, setProgress] = useState(0);
3
4  const [commit] = useMutation(graphql`
5    mutation FileUploadMutation($input: UploadFileInput!) {
6      uploadFile(input: $input) {
7        id
8      }
9    }
10  `);
11
12  const upload = useCallback(
13    (file: File) => {
14      commit({
15        variables: {
16          input: {
17            file: null,
18            onUploadProgress: ({ percent }) => setProgress(percent),
19          },
20        },
21        uploadables: {
22          file,
23        },
24      });
25    },
26    [commit]
27  );
28
29  return null; // Your component
30};