General Concepts

refine core is fully independent of UI, meaning that you can use core components and hooks without any UI dependency. All of the data-related hooks, such as useTable, useForm, useList, of refine can also be given some common properties like resource, meta, queryOptions etc. that are independent of UI.

resource​

resource is a prop that gets passed to dataProvider as a paremeter by refine. It is usually used as an API endpoint path but it all depends on how you handle it in your dataProvider

For an example, refer to the Creating a data provider from scratch part of the tutorial

How does refine know what the value of resource is?​

refine automatically determines the value from the active route where the component or the hook is used.

For example, if you are using the hook in the <PostList> component, the resource value defaults to "posts" because the active route is /posts

import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";

import { BrowserRouter, Route, Routes } from "react-router-dom";

import { PostList } from "pages/posts/list.tsx";

const App: React.FC = () => {
    return (
        <BrowserRouter>
            <Refine
                routerProvider={routerProvider}
                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
                resources={[
                    {
                        name: "posts",
                        list: "/posts",
                    },
                ]}
            >
                <Routes>
                    <Route path="/posts" element={<PostList />} />
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

export default App;

This value however can be overriden by passing the resource prop to the hook:

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

const PostList: React.FC = () => {
    const result = useTable({
        resource: "users",
    });

    return <div>...</div>;
};

If you have multiple resources with the same name, you can pass the identifier instead of the name of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the name of the resource defined in the <Refine/> component.

For more information, refer to the identifier of the <Refine/> component documentation →

meta​

meta is a special property that can be used to pass additional information to data provider methods for the following purposes:

• Customizing the data provider methods for specific use cases.
• Generating GraphQL queries using plain JavaScript Objects (JSON).
• Filling additional parameters in target routes when occurs redirection.

Passing a global meta specific to a resource​

You can define a global meta specific to a resource, which will be passed to all the data provider methods whenever the resource is matched.

For instance, to pass the role property to all data provider methods for the posts resource:

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

const App: React.FC = () => {
    return (
        <Refine
            resources={[
                {
                    name: "posts",
                    meta: {
                        role: "editor",
                    },
                },
            ]}
        />
    );
};

Passing meta with hook-specific properties​

You can pass the meta property with hook-specific properties to data provider methods, which will override the global meta of the resource.

For example, you can pass the headers property to the getOne method by using the meta property in the useOne hook:

    useOne({
        resource: "posts",
        id: 1,
        meta: {
            headers: { "x-meta-data": "true" },
        },
    });

    const myDataProvider = {
        ...
        getOne: async ({ resource, id, meta }) => {
            const headers = meta?.headers ?? {};
            const url = `${apiUrl}/${resource}/${id}`;

            const { data } = await httpClient.get(url, { headers });

            return {
                data,
            };
        },
        ...
    };

Using URL query parameters as meta properties​

Query parameters on the URL can also be used as meta properties for data provider methods, which is very useful when you want to customize them based on query parameters.

For example, if the URL is https://example.com/posts?foo=bar, the foo property will be passed to the data provider methods as a meta property.

const dataProvider = {
    getList: async ({ resource, meta }) => {
        console.log(meta); // { foo: "bar" }
    },
    ...
};

Using meta to generate GraphQL queries​

Refer to the GraphQL guide→

Passing meta to your existing dataProvider methods​

Refer to the related section in FAQ→