How do you handle fetching in frontend?.... it's a pain right?
When i tried supabase i liked how they handle their request
const { data, error } = await supabaseRequest()
if (error) {
// handle error
return
}
// since there is not an error
// intellisense will show that data cannot be null
console.log(data)
IT'S SO SIMPLE!!!
IT'S SO SIMPLE!!!
So I tried replicating the structure but with my own backend and using axios in the frontend
1st Step
Make sure you are returning { data, error} in the backend
export const createProduct = async (req: Req, res: Res) => {
try {
const newProd = await saveProductDb(req.body);
return res.status(201).json({ data: newProd, error: null });
} catch (error) {
return res.status(400).json({ data: null, error: error.message });
}
};
2nd step ( optional, probably )
Initialize Axios Instance / Interceptors
// Initialize Axios Instance
axios.defaults.withCredentials = true;
const AxiosInstance = axios.create({
baseURL: BASE_URL,
withCredentials: true,
});
AxiosInstance.interceptors.response.use(
(response) => response,
(error) => {
// You can handle errors here
toast({
title: error.response.data.error,
status: "error",
position: "top-right",
});
console.log(error);
return Promise.reject(error);
}
);
3rd step
Initiliaze Types, this is for the intellisense in the responses
// Initialize Types
type ApiRes<T> = {
data: T | null;
error: string | null;
};
type AxiosParsedResponse<T> =
| { data: null; error: AxiosError<ApiRes<T>> }
| {
data: T;
error: null;
};
4th step
Create your Get,Post,Etc axios instances
export const AxiosGet = async <T>(
url: string
): Promise<AxiosParsedResponse<T>> => {
try {
const res = await AxiosInstance.get<ApiRes<T>>(url);
return { data: res.data.data!, error: null };
} catch (err) {
const error = err as AxiosError<ApiRes<T>>;
return { data: null, error: error };
}
};
in this example we're using get.
DONE!
export const Register = async (userData: RegisterFields) => {
const { data, error } = await AxiosPost<UserData>("/auth/register", userData);
// data can be null
if (error) return;
// intellisense shows data is not null
console.log(data);
};
There is probably a better way out there to do this please do comment, i want to learn and there are probably more ways to handle request better than this, but i just want to share this because it works for me.
Thanks for reading!
Top comments (0)