apollo_client_3_file_upload_with_matters_upload_link.ts

1import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
2import { createUploadLink } from '@matters/apollo-upload-client';
3
4// 1. Create the upload link
5const link = createUploadLink({
6  uri: 'https://your-api-endpoint.com/graphql',
7  headers: {
8    'Apollo-Require-Preflight': 'true',
9  },
10});
11
12// 2. Initialize Apollo Client with the upload link
13const client = new ApolloClient({
14  link,
15  cache: new InMemoryCache(),
16});
17
18// 3. Example Mutation for file upload
19const UPLOAD_FILE = gql`
20  mutation uploadFile($file: Upload!) {
21    uploadFile(file: $file) {
22      id
23      url
24    }
25  }
26`;
27
28// Usage example with a file from an input element
29const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
30  const file = event.target.files?.[0];
31  if (file) {
32    try {
33      const { data } = await client.mutate({
34        mutation: UPLOAD_FILE,
35        variables: { file },
36      });
37      console.log('Upload success:', data);
38    } catch (error) {
39      console.error('Upload error:', error);
40    }
41  }
42};