urql-absinthe-upload-exchange

Urql exchange to support file uploads to an (Elixir) Absinthe backend

BREAKING CHANGE in v2.0.0: This package is now ESM-only. CommonJS support has been removed.

Features

• 📁 File upload support for urql GraphQL client
• 🔄 Compatible with Absinthe backends (Phoenix/Elixir)
• 📦 Pure ESM package
• 🔍 TypeScript type definitions included

Requirements

• Node.js >= 18.0.0
• urql ^5.0.0 (peer dependency)

Installation

# npm
npm install urql-absinthe-upload-exchange

# yarn
yarn add urql-absinthe-upload-exchange

# pnpm
pnpm add urql-absinthe-upload-exchange

Usage

Add the exchange to your urql client, right before the fetch exchange:

import { createClient, dedupExchange, cacheExchange, fetchExchange } from 'urql';
import absintheUploadExchange from 'urql-absinthe-upload-exchange';

const client = createClient({
  url: 'http://localhost:4000/graphql',
  exchanges: [dedupExchange, cacheExchange, absintheUploadExchange, fetchExchange],
});

Example with file upload

<script setup>
import { ref } from 'vue';
import { useMutation } from '@urql/vue';

const UploadDocument = `
  mutation($file: Upload!) {
    uploadFile(file: $file) {
      id
      url
    }
  }
`;

// Create a mutation hook
const { executeMutation, fetching, data, error } = useMutation(UploadDocument);

// File upload handling
const fileInput = ref(null);
const uploadedFileUrl = ref('');

const handleFileUpload = async () => {
  const file = fileInput.value?.files[0];
  if (!file) return;
  
  try {
    const result = await executeMutation({ file });
    if (result.data?.uploadFile?.url) {
      uploadedFileUrl.value = result.data.uploadFile.url;
    }
  } catch (err) {
    console.error('Upload failed:', err);
  }
};
</script>

<template>
  <div>
    <h2>File Upload</h2>
    <input 
      type="file" 
      ref="fileInput"
      @change="handleFileUpload"
    />
    
    <div v-if="fetching" class="status">
      Uploading file...
    </div>
    
    <div v-else-if="error" class="error">
      Upload failed: {{ error.message }}
    </div>
    
    <div v-else-if="uploadedFileUrl" class="success">
      File uploaded successfully!<br>
      URL: {{ uploadedFileUrl }}
    </div>
  </div>
</template>

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgements

This project is based on code originally provided by Harry Grumbar in this gist. Used with permission.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

1. Fork the repository
2. Create your feature branch: git checkout -b feature/my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin feature/my-new-feature
5. Submit a pull request