What is the best Query and mutation code format ?
HI everyone ive been using tanstack query now for a little while and i love it its amazing. However i realised i have been querying data in a very poor way, doing it all in the same page with the html. I have now learned creating custom hooks with error handling. My question is what is your recommend format and how to write custom hooks your way or is there a perfect way? How can i imporve my code below ?
type Member = {
id: string;
name: string;
};
type NewMember = {
name: string;
};
const Axios: AxiosInstance = axios.create({baseURL: "https://retoolapi.dev/Zx11Hr/data"})
const get = async (): Promise<Member[]> => {
try {
const response = await Axios.get("");
const data: Member[] = response.data;
return data;
} catch (error) {
const message = (error as AxiosError<{message: string}>).response?.data?.message;
console.log("Message", message);
throw error;
}
};
export const UseGet = () => {
return useQuery<Member[], AxiosError>({
queryKey: ["members"],
queryFn: () => get(),
onSuccess: (data: Member[]) => console.log("Success", data),
onError: (error: AxiosError) => console.log("Error", error),
} as UseQueryOptions<Member[] ,AxiosError>)
};
const create = async(newMember: NewMember): Promise<Member> => {
try {
const response = await Axios.post("", newMember)
const data:Member = response.data;
return data
} catch (error) {
const message = (error as AxiosError<{message: string}>).response?.data?.message
console.log("Error", message)
throw error;
}
}
export const useCreate = () => {
return useMutation<Member, AxiosError, NewMember>({
mutationFn: (data:NewMember) => create(data),
onSuccess: (data: Member) => console.log("Success", data),
onError: (error: AxiosError) => console.log("Error", error)
})
}type Member = {
id: string;
name: string;
};
type NewMember = {
name: string;
};
const Axios: AxiosInstance = axios.create({baseURL: "https://retoolapi.dev/Zx11Hr/data"})
const get = async (): Promise<Member[]> => {
try {
const response = await Axios.get("");
const data: Member[] = response.data;
return data;
} catch (error) {
const message = (error as AxiosError<{message: string}>).response?.data?.message;
console.log("Message", message);
throw error;
}
};
export const UseGet = () => {
return useQuery<Member[], AxiosError>({
queryKey: ["members"],
queryFn: () => get(),
onSuccess: (data: Member[]) => console.log("Success", data),
onError: (error: AxiosError) => console.log("Error", error),
} as UseQueryOptions<Member[] ,AxiosError>)
};
const create = async(newMember: NewMember): Promise<Member> => {
try {
const response = await Axios.post("", newMember)
const data:Member = response.data;
return data
} catch (error) {
const message = (error as AxiosError<{message: string}>).response?.data?.message
console.log("Error", message)
throw error;
}
}
export const useCreate = () => {
return useMutation<Member, AxiosError, NewMember>({
mutationFn: (data:NewMember) => create(data),
onSuccess: (data: Member) => console.log("Success", data),
onError: (error: AxiosError) => console.log("Error", error)
})
}
