Sending Data with FormData, React Query, and Axios Instance

modern web development, handling data submission efficiently is crucial. This article will guide you through the process of sending data using FormData, React Query, and Axios instance in a React application.

Introduction

When building web applications, you often need to send data to a server. This can be done using various methods, but using FormData, React Query, and Axios instance together provides a powerful and flexible approach. FormData allows you to construct a set of key/value pairs representing form fields and their values, which can be easily sent using Axios. React Query simplifies data fetching and state management, making it easier to handle server-side data.

Setting Up the Project

First, let's set up a new React project and install the necessary dependencies.

bash

npx create-react-app formdata-react-query-axios

cd formdata-react-query-axios

npm install axios react-query

Creating an Axios Instance

Creating an Axios instance allows you to configure default settings for all your HTTP requests, such as base URL and headers.

// src/api/axiosInstance.js  
import axios from 'axios';

const axiosInstance = axios.create({  
baseURL: '[https://api.example.com](https://api.example.com/)',  
headers: {  
'Content-Type': 'multipart/form-data',  
},  
});

export default axiosInstance;

Setting Up React Query

React Query provides hooks for fetching, caching, and updating data. To use React Query, wrap your application with the QueryClientProvider.

// src/index.js  
import React from 'react';  
import ReactDOM from 'react-dom';  
import { QueryClient, QueryClientProvider } from 'react-query';  
import App from './App';
const queryClient = new QueryClient();
ReactDOM.render(document.getElementById('root')  );  

Creating a Form Component

Next, create a form component that uses FormData to send data.

// src/components/MyForm.js  
import React, { useState } from 'react';  
import { useMutation } from 'react-query';  
import axiosInstance from '../api/axiosInstance';

const MyForm = () => {  
const [file, setFile] = useState(null);

const mutation = useMutation((formData) => {  
return axiosInstance.post('/upload', formData);  
});

const handleSubmit = (event) => {  
event.preventDefault();  
const formData = new FormData();  
formData.append('file', file);
mutation.mutate(formData);
};
return (  
<input
type="file"  
onChange={(e) => setFile(e.target.files[0])}  
/>  
Upload  
  </input>
);  
};

export default MyForm;  

Handling Form Submission

In the form component, handle the form submission by creating a FormData object and appending the file to it. Use the useMutation hook from React Query to send the data using the Axios instance.

javascript

const handleSubmit = (event) => {  
event.preventDefault();  
const formData = new FormData();  
formData.append('file', file);

mutation.mutate(formData);  
};  

Conclusion

By combining FormData, React Query, and Axios instance, you can efficiently handle data submission in your React applications. This approach provides flexibility and simplifies the process of sending data to a server.