apollo-upload-client

import { ApolloClient, InMemoryCache, gql, ApolloProvider } from '@apollo/client'; import { createUploadLink } from 'apollo-upload-client'; import React from 'react'; import { useMutation } from '@apollo/client/react'; // Configure the Apollo Client with the upload link const uploadLink = createUploadLink({ uri: 'http://localhost:4000/graphql', // Replace with your GraphQL server endpoint }); const client = new ApolloClient({ cache: new InMemoryCache(), link: uploadLink, }); // GraphQL mutation definition for file upload const UPLOAD_FILE_MUTATION = gql` mutation uploadFile($file: Upload!) { uploadFile(file: $file) { filename mimetype encoding success } } `; /** React component for uploading a single file. */ function UploadFileComponent() { const [uploadFile, { loading, error, data }] = useMutation(UPLOAD_FILE_MUTATION); const handleFileChange = ({ target: { validity, files } }) => { if (validity.valid && files && files[0]) { uploadFile({ variables: { file: files[0], }, }); } }; return ( <div> <input type="file" required onChange={handleFileChange} /> {loading && <p>Uploading...</p>} {error && <p>Error: {error.message}</p>} {data && <p>Upload successful: {data.uploadFile.filename}</p>} </div> ); } // Root component to provide Apollo Client context function App() { return ( <ApolloProvider client={client}> <h1>File Upload Example</h1> <UploadFileComponent /> </ApolloProvider> ); } export default App;