Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(examples) Add with-multipart example (#1585)
* (examples) add with-multipart example
authored by
Yanko Valera
and committed by
GitHub
4f027e82
5e6eeb4d
+152
+22
examples/with-multipart/README.md
+22
examples/with-multipart/README.md
···
1
+
# Integrating with React
2
+
3
+
Integrating urql is as simple as:
4
+
5
+
1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
6
+
7
+
```sh
8
+
yarn add urql graphql
9
+
# or
10
+
npm install --save urql graphql
11
+
```
12
+
13
+
2. Add [multipart exchange](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/)
14
+
15
+
```yarn add @urql/exchange-multipart-fetch
16
+
# or
17
+
npm install --save @urql/exchange-multipart-fetch
18
+
```
19
+
20
+
3. Setting up the Client [here](src/App.js)
21
+
22
+
4. Execute the Mutation [here](src/pages/FileUpload.js)
+39
examples/with-multipart/package.json
+39
examples/with-multipart/package.json
···
1
+
{
2
+
"name": "react-urql-query",
3
+
"version": "1.0.0",
4
+
"private": true,
5
+
"dependencies": {
6
+
"@urql/exchange-multipart-fetch": "^0.1.11",
7
+
"graphql": "^15.5.0",
8
+
"react": "^17.0.2",
9
+
"react-dom": "^17.0.2",
10
+
"urql": "^2.0.2"
11
+
},
12
+
"devDependencies": {
13
+
"react-scripts": "4.0.3"
14
+
},
15
+
"scripts": {
16
+
"start": "react-scripts start",
17
+
"build": "react-scripts build",
18
+
"test": "react-scripts test",
19
+
"eject": "react-scripts eject"
20
+
},
21
+
"eslintConfig": {
22
+
"extends": [
23
+
"react-app",
24
+
"react-app/jest"
25
+
]
26
+
},
27
+
"browserslist": {
28
+
"production": [
29
+
">0.2%",
30
+
"not dead",
31
+
"not op_mini all"
32
+
],
33
+
"development": [
34
+
"last 1 chrome version",
35
+
"last 1 firefox version",
36
+
"last 1 safari version"
37
+
]
38
+
}
39
+
}
+19
examples/with-multipart/src/App.js
+19
examples/with-multipart/src/App.js
···
1
+
import { createClient, Provider } from "urql";
2
+
import { multipartFetchExchange } from '@urql/exchange-multipart-fetch';
3
+
4
+
import FileUpload from "./pages/FileUpload";
5
+
6
+
const client = createClient({
7
+
url: "https://trygql.dev/graphql/uploads-mock",
8
+
exchanges: [multipartFetchExchange],
9
+
});
10
+
11
+
function App() {
12
+
return (
13
+
<Provider value={client}>
14
+
<FileUpload />
15
+
</Provider>
16
+
);
17
+
}
18
+
19
+
export default App;
+13
examples/with-multipart/src/index.css
+13
examples/with-multipart/src/index.css
···
1
+
body {
2
+
margin: 0;
3
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4
+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5
+
sans-serif;
6
+
-webkit-font-smoothing: antialiased;
7
+
-moz-osx-font-smoothing: grayscale;
8
+
}
9
+
10
+
code {
11
+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12
+
monospace;
13
+
}
+12
examples/with-multipart/src/index.js
+12
examples/with-multipart/src/index.js
+47
examples/with-multipart/src/pages/FileUpload.js
+47
examples/with-multipart/src/pages/FileUpload.js
···
1
+
import React, { useState } from "react";
2
+
import { gql, useMutation } from "urql";
3
+
4
+
const UPLOAD_FILE = gql`
5
+
mutation UploadFile($file: Upload!) {
6
+
uploadFile(file: $file) {
7
+
filename
8
+
}
9
+
}
10
+
`;
11
+
12
+
const 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}>
39
+
Upload!
40
+
</button>
41
+
</div>
42
+
)}
43
+
</div>
44
+
);
45
+
};
46
+
47
+
export default FileUpload;