absent-sapphire•2y ago

useCustomMutation with GET

Hi, due to a non standard API endpoint I have to do a single call to a GET endpoint on a button click. Initially I thought to use useCustomMutation but the hooks doesn't provide the get method. Is there a "good" way to overcome this case? At least I could just use the axios instance (we use axios for xhr calls) used inside the dataProvider.

3 Replies

kapa.ai•2y ago

Hi @nickwoods. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can use the useCustom hook for this purpose, as it supports the get method and allows you to send custom query requests. Here's an example of how to use the useCustom hook:

import { useCustom, useApiUrl } from "@refinedev/core";

interface PostUniqueCheckResponse {
  isAvailable: boolean;
}

const apiUrl = useApiUrl();

const { data, isLoading } = useCustom<PostUniqueCheckResponse>({
  url: `${apiUrl}/posts-unique-check`,
  method: "get",
  config: {
    headers: {
      "x-custom-header": "foo-bar",
    },
    query: {
      title: "Foo bar",
    },
  },
});

import { useCustom, useApiUrl } from "@refinedev/core";

interface PostUniqueCheckResponse {
  isAvailable: boolean;
}

const apiUrl = useApiUrl();

const { data, isLoading } = useCustom<PostUniqueCheckResponse>({
  url: `${apiUrl}/posts-unique-check`,
  method: "get",
  config: {
    headers: {
      "x-custom-header": "foo-bar",
    },
    query: {
      title: "Foo bar",
    },
  },
});

You can find more information about the useCustom hook in the documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustom). If you prefer to use the axios instance directly, you can do so by importing it from your data provider and making the request as needed. However, using the useCustom hook is recommended as it provides additional features and integrates well with the refine framework. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@567279564028510208> kapa.ai is still learning and improving, please let us how it did by reacting below

absent-sapphireOP•2y ago

const { refetch } = useCustom({
    url: `${apiUrl}/bulk-action`,
    method: "get",
    queryOptions: {
      enabled: false,
    },
  });

  const doBulkAction = () => {
    refetch().then(() => {
      // show notification
      open?.({
        type: "success",
        message: t("bulkActionSuccess"),
      });
    });
  };

const { refetch } = useCustom({
    url: `${apiUrl}/bulk-action`,
    method: "get",
    queryOptions: {
      enabled: false,
    },
  });

  const doBulkAction = () => {
    refetch().then(() => {
      // show notification
      open?.({
        type: "success",
        message: t("bulkActionSuccess"),
      });
    });
  };

This works like a charm! Thx bot

useCustomMutation with GET

Did you find this page helpful?