Apollo GraphQL File Upload Link

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;