Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1import React, { useState } from 'react';
2import { gql, useMutation } from 'urql';
3
4const UPLOAD_FILE = gql`
5 mutation UploadFile($file: Upload!) {
6 uploadFile(file: $file) {
7 filename
8 }
9 }
10`;
11
12const FileUpload = () => {
13 const [selectedFile, setSelectedFile] = useState();
14 const [result, uploadFile] = useMutation(UPLOAD_FILE);
15
16 const { data, fetching, error } = result;
17
18 const handleFileUpload = () => {
19 uploadFile({ file: selectedFile });
20 };
21
22 const handleFileChange = event => {
23 setSelectedFile(event.target.files[0]);
24 };
25
26 return (
27 <div>
28 {fetching && <p>Loading...</p>}
29
30 {error && <p>Oh no... {error.message}</p>}
31
32 {data && data.uploadFile ? (
33 <p>File uploaded to {data.uploadFile.filename}</p>
34 ) : (
35 <div>
36 <input type="file" onChange={handleFileChange} />
37
38 <button onClick={handleFileUpload}>Upload!</button>
39 </div>
40 )}
41 </div>
42 );
43};
44
45export default FileUpload;