deep-jade•2w ago

what is the best way to make an api call on refine 5?

what is the best way to make a POST api call on refine5?

17 Replies

Hi @SetiZ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The best way to make an API call in Refine v5 is to use the built-in data hooks, which are tightly integrated with your configured data provider. These hooks abstract away the details of making HTTP requests and managing state, making your code cleaner and more maintainable. For general API calls (GET, POST, etc.), you should use the appropriate data hook: - For fetching data (GET), use hooks like useList, useOne, etc. - For creating data (POST), use the useCreate hook. Making a POST API Call in Refine v5 The recommended way to make a POST (create) API call is to use the useCreate hook, which is mapped to the create method of your data provider. Here’s a basic example:

import { useCreate } from "@refinedev/core";

const { mutate, isLoading, isSuccess, error } = useCreate();

const handleCreate = () => {
  mutate({
    resource: "posts",
    values: {
      title: "New Post",
      content: "This is the content of the new post.",
    },
  });
};

import { useCreate } from "@refinedev/core";

const { mutate, isLoading, isSuccess, error } = useCreate();

const handleCreate = () => {
  mutate({
    resource: "posts",
    values: {
      title: "New Post",
      content: "This is the content of the new post.",
    },
  });
};

- resource is the name of the resource you want to create (e.g., "posts"). - values contains the data you want to send in the POST request. This approach ensures your API call is consistent with Refine’s architecture and benefits from features like automatic cache invalidation, error handling, and loading state management. If you need to make a custom POST request (not tied to a resource), you can use the useCustom hook, which allows you to specify the method, URL, and payload directly.

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

const { mutate } = useCustom();

const handleCustomPost = () => {
  mutate({
    url: "/custom-endpoint",
    method: "post",
    payload: { key: "value" },
  });
};

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

const { mutate } = useCustom();

const handleCustomPost = () => {
  mutate({
    url: "/custom-endpoint",
    method: "post",
    payload: { key: "value" },
  });
};

Summary:
- Use useCreate for standard POST (create) operations on resources. - Use useCustom for custom POST requests. This is the best practice for making API calls, including POST requests, in Refine v5, as it leverages the framework’s data management and state handling features What's new in v5?, Data hooks. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

deep-jadeOP•2w ago

@kapa.ai what if i need to make a call to a different route?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you need to make an API call to a different or custom route in Refine v5, the recommended approach is to use the useCustom hook. This hook allows you to specify the exact URL, HTTP method, and any additional configuration (headers, query params, payload, etc.) for your request. Here’s how you can use useCustom to make a call to a different route:

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

const { data, isLoading, error } = useCustom({
  url: "/your/custom/route",
  method: "post", // or "get", "put", etc.
  config: {
    payload: {
      key: "value",
    },
    headers: {
      "x-custom-header": "foo-bar",
    },
    query: {
      param1: "value1",
    },
  },
});

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

const { data, isLoading, error } = useCustom({
  url: "/your/custom/route",
  method: "post", // or "get", "put", etc.
  config: {
    payload: {
      key: "value",
    },
    headers: {
      "x-custom-header": "foo-bar",
    },
    query: {
      param1: "value1",
    },
  },
});

- The url property lets you target any endpoint you need. - The method property specifies the HTTP method (e.g., "post"). - The config object allows you to pass payload, headers, query parameters, and more. This approach is ideal for non-standard REST endpoints or when you need to interact with external resources or custom API routes that don't fit the typical CRUD pattern of a resource. The useCustom hook is flexible and designed for these scenarios useCustom documentation, Data Provider custom method. Note:
- For standard CRUD operations on resources, prefer the built-in hooks like useCreate, useUpdate, etc. - For custom routes, useCustom is the best practice. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

deep-jadeOP•2w ago

@kapa.ai useCustom on a button click, is it possible?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, it is possible to use the useCustom hook in Refine and trigger the API call on a button click. By default, useCustom executes automatically when its properties change, but you can control this behavior using the queryOptions.enabled property. Set enabled: false to prevent the request from running automatically, and then use the refetch function returned by the hook to trigger the call manually when the button is clicked. Here’s an example:

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

const { refetch, data, isLoading } = useCustom({
  url: "/your/custom/route",
  method: "get",
  queryOptions: {
    enabled: false, // Prevent automatic execution
  },
});

return (
  <button onClick={() => refetch()} disabled={isLoading}>
    Fetch Data
  </button>
);

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

const { refetch, data, isLoading } = useCustom({
  url: "/your/custom/route",
  method: "get",
  queryOptions: {
    enabled: false, // Prevent automatic execution
  },
});

return (
  <button onClick={() => refetch()} disabled={isLoading}>
    Fetch Data
  </button>
);

This pattern is supported and recommended for cases where you want to make a custom API call in response to a user action, such as a button click. For more details, see the official documentation and related discussions useCustom documentation, GitHub Discussion. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

deep-jadeOP•2w ago

@kapa.ai useCustom or usequery?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- In Refine, you should use the useCustom hook instead of using TanStack Query's useQuery directly. The useCustom hook is specifically designed to integrate with Refine's data provider system and offers additional features tailored for Refine applications, such as handling custom endpoints, passing meta information, and working seamlessly with Refine's notification and state management systems. - useCustom is an extended version of TanStack Query's useQuery, but it is adapted for Refine and supports all its features, plus some extras. It uses the custom method from your data provider and is the recommended way to make custom API requests in Refine apps useCustom documentation. - Using useQuery directly bypasses Refine's data provider and its conventions, so you lose out on features like meta handling, notifications, and unified data management. Summary:
Use useCustom for custom API requests in Refine. Only use useQuery directly if you have a very specific use case that cannot be handled by Refine's data hooks, but this is rarely necessary in typical Refine applications useCustom documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

deep-jadeOP•2w ago

@kapa.ai can I do this in a helper method?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not explicitly mention whether you can use the useCustom hook inside a helper method. In React (and by extension, Refine), hooks like useCustom must be called directly inside a React component or a custom hook, not inside regular helper functions or conditionally. This is a general React rule, not specific to Refine. If you need to encapsulate logic, you can create a custom hook that uses useCustom internally, but you cannot call useCustom inside a plain helper method or outside of a React function component or custom hook. The documentation and examples provided all show useCustom being used directly in components or custom hooks, not in helper methods useCustom documentation. If you need to trigger the request from a helper, you should instead expose a function (like refetch) from your component or custom hook and call that function from your helper, but the hook itself must remain in a valid React context. Summary:
You cannot use useCustom directly in a helper method; it must be used in a React component or custom hook. The knowledge sources do not provide an example or recommendation for using it in a helper method. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

deep-jadeOP•2w ago

@kapa.ai give me an exemple of fetch with useQuery to send a post api call

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not provide an example of using useQuery to send a POST API call. In fact, according to the provided sources, useQuery is intended for "read" operations (such as GET requests), not for "write" operations like POST. For POST (create) operations, the recommended approach is to use the useMutation hook from React Query, as shown in the following example:

import React, { useState } from "react";
import { useMutation } from "react-query";
import axios from "axios";

const CreatePost = () => {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");

  const mutation = useMutation((newPost) =>
    axios.post("<https://jsonplaceholder.typicode.com/posts",> newPost),
  );

  const submitData = () => {
    mutation.mutate({ title, body });
  };

  if (mutation.isLoading) {
    return <span>Submitting...</span>;
  }

  if (mutation.isError) {
    return <span>Error: {mutation.error.message}</span>;
  }

  if (mutation.isSuccess) {
    return <span>Post submitted!</span>;
  }

  return (
    <div>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
      />
      <input
        type="text"
        value={body}
        onChange={(e) => setBody(e.target.value)}
        placeholder="Body"
      />
      <button onClick={submitData}>Submit</button>
    </div>
  );
};
export default CreatePost;

import React, { useState } from "react";
import { useMutation } from "react-query";
import axios from "axios";

const CreatePost = () => {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");

  const mutation = useMutation((newPost) =>
    axios.post("<https://jsonplaceholder.typicode.com/posts",> newPost),
  );

  const submitData = () => {
    mutation.mutate({ title, body });
  };

  if (mutation.isLoading) {
    return <span>Submitting...</span>;
  }

  if (mutation.isError) {
    return <span>Error: {mutation.error.message}</span>;
  }

  if (mutation.isSuccess) {
    return <span>Post submitted!</span>;
  }

  return (
    <div>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
      />
      <input
        type="text"
        value={body}
        onChange={(e) => setBody(e.target.value)}
        placeholder="Body"
      />
      <button onClick={submitData}>Submit</button>
    </div>
  );
};
export default CreatePost;

This example demonstrates how to use useMutation for a POST request, which is the correct and recommended approach according to the knowledge sources Mutating Data. If you specifically need to use a POST request, you should use useMutation, not useQuery. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

what is the best way to make an api call on refine 5?

Did you find this page helpful?