How to use only the CRUD data hooks (useCreate, useOne etc.) without the router ?

[KrishnaPG]

The data hooks of Refine (such as useCreate, useOne etc.) are very good work on top of the TanStack react-query. When starting an application from scratch with Refine completely taking over the routing at the App level, it worked great.

But how to use the refine-core data hooks in truly headless fashion without the refine-router and other app-level takeover of Refine?

Could not find any example of how to integrate the refine-core data hooks into an existing application (i.e. using the refine-core hooks purely for data crud at the component level, not at page level).

For example, I tried to create a small MyComponent as below:

const MyList = () => {
  const { selectProps: categorySelectProps } = useSelect({  resource: "categories" });
  return (
    <div>
      <pre>{JSON.stringify(categorySelectProps, null, 2)}</pre>
    </div>
  );
};

export const MyComponent = () => {
  return (
    <Refine
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}>
      <MyList />
    </Refine>
  );
};

The MyComponent goes as child component into some bigger framework. The above code instead of showing the retrieved data content, just shows "welcome page" (screenshot below):

---

Next, tried to remove the <Refine> wrapper and used the useSelect directly - but it started giving Error: No QueryClient set, use QueryClientProvider to set one

---

Supplying the QueryClient as context explicitly is not helping either:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();
const queryCtx = React.createContext(queryClient); // create some context and supply it manually below

export const MyComponent = () => {
  const { selectProps: categorySelectProps } = useSelect({
    resource: "categories", queryOptions: {context: queryCtx}
  });

  return (
    <div>
      <pre>{JSON.stringify(categorySelectProps, null, 2)}</pre>
    </div>
  );
};

export default MyComponent ;

Even the below wrapper will not work, and the same error.

export const MyComponent = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <MyList />
    </QueryClientProvider>
  );
};

---

Q: Any help on how to use the useCreate, useOne ... CRUD hooks inside embedded components (not at page level) - would be of great help.

[salihozdemir]

Hello @KrishnaPG,

Thank you for your great question. Actually, what you want to do is not possible at the moment. The reason is that the refine hooks are depending on the some providers that are provided by the refine App component. But we are planning to make it possible in the future. This change will be part of the next major release of refine. I will keep you updated. 🚀