Skip to main content
Version: 3.xx.xx

FAQ

How can I change the form data before submitting it to the API?

You may need to modify the form data before it is sent to the API.

For example, Let's send the values we received from the user in two separate inputs, name and surname, to the API as fullName.

import React, { useState } from "react";
import { useForm } from "@pankod/refine-core";

export const UserCreate: React.FC = () => {
const [name, setName] = useState();
const [surname, setSurname] = useState();

const { onFinish } = useForm();

const onSubmit = (e) => {
e.preventDefault();
const fullName = `${name} ${surname}`;
onFinish({
fullName: fullName,
name,
surname,
});
};

return (
<form onSubmit={onSubmit}>
<input onChange={(e) => setName(e.target.value)} />
<input onChange={(e) => setSurname(e.target.value)} />
<button type="submit">Submit</button>
</form>
);
};

How can I refetch data?

Refine automatically invalidates the affected resources after mutations. However, in some cases you may want to refetch manually.

import { useTable, useForm, useShow } from "@pankod/refine-core";

// All "data" related hooks provided by Refine can use queryResult' refetch function
const { tableQueryResult: { refetch } } = useTable();
const { queryResult: { refetch } } = useForm();
...
...
const { queryResult: { refetch } } = useShow();
...
...

How can I request an API with nested route?

Refine's way of doing this is with the resource property on all data hooks. You can think of the resource property as the URL.

For example, If you want to make a request of the URL /user/1/posts.

import { useTable, useOne } from "@pankod/refine-core";

useTable({
resource: "/users/1/posts"
});

How can I ensure a query is only runned after a certain variable is available and not on load?

Note that data related hooks (useMany, useOne, etc.) can also accept all useQuery options, which allows you to implement dependent queries whereby a query is only runned after a certain data is available. This is particularly useful if you want useMany to only run after a certain data is available and not on load.

Refer to react-query docs on dependent queries for more information β†’

  • Suppose you want this query to run after categoryIds is fetched by a preceding query, you can set enabled to categoryIds.length > 0. This will ensure that useMany is only runned after categoryIds is fetched.
useMany({
resource: "categories",
ids: categoryIds,
queryOptions: { enabled: categoryIds.length > 0 },
});

Can I work with JavaScript?

Yes! You can work with JavaScript!

Refer to Refine JavaScript example β†’