Wasp-lang•4mo ago

implementation of refinedev/inferencer

I just tried to implement @refinedev/inferencer into wasp but it didn't work for me(meaby because im bad in frontend), has anyone managed to do it successfully or maybe it won't work due to different routing? Any ideas? Only idea i tried is to put rafine routing in MainPage but it have no sense.

12 Replies

kapa.ai•4mo ago

Hi @grsh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

MEE6•4mo ago

Wohooo @grsh, you just became a Waspeteer level 1!

kapa.ai•4mo ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. The knowledge sources provided do not contain information about the implementation of @refinedev/inferencer into Wasp. However, I can tell you that Wasp uses a top-level routing system, and for nested routing, you can use react-router source (https://discord.com/channels/686873244791210014/1203313045661548604). For more complex routing, there are discussions about improving frontend routing in Wasp, including the use of a sub-DSL for organizing routes into hierarchies source (https://github.com/wasp-lang/wasp/issues/1072). For more specific help, I would recommend checking the Wasp documentation or reaching out to the Wasp community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @grsh, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•4mo ago

Can you share some code of your attempt so we can better understand what doesn't work for you? 😄

martinsos•4mo ago

Hm yeah I don't know much about inferencer -> seems to be quite peculiar tool, it produces frontend code for you based on your other code? What did you try, where did you get stuck?

grsh•4mo ago

I tried to implement it this way

app refine_wasp2 {
  wasp: {
    version: "^0.13.2"
  },
  title: "refine_wasp2"
}

route RootRoute { path: "/", to: MainPage }
page MainPage {
  component: import { MainPage } from "@src/MainPage"
}

app refine_wasp2 {
  wasp: {
    version: "^0.13.2"
  },
  title: "refine_wasp2"
}

route RootRoute { path: "/", to: MainPage }
page MainPage {
  component: import { MainPage } from "@src/MainPage"
}

MainPage.jsx

import waspLogo from './waspLogo.png'
import './Main.css'
import { dataProvider } from "./providers/data-provider";
import { Refine } from "@refinedev/core";

export const MainPage = () => {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        routerProvider={routerProvider}
        resources={[
          {
            name: "products",
            list: "/products",
          },
        ]}
      >
        <Routes>
          <Route path="/products" element={<HeadlessInferencer />} />
        </Routes>
      </Refine>
    </BrowserRouter>
  );
}

import waspLogo from './waspLogo.png'
import './Main.css'
import { dataProvider } from "./providers/data-provider";
import { Refine } from "@refinedev/core";

export const MainPage = () => {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        routerProvider={routerProvider}
        resources={[
          {
            name: "products",
            list: "/products",
          },
        ]}
      >
        <Routes>
          <Route path="/products" element={<HeadlessInferencer />} />
        </Routes>
      </Refine>
    </BrowserRouter>
  );
}

I imitates that -> https://refine.dev/docs/core/components/inferencer/#usage

Inferencer | Refine

You can automatically generate views for your resources using @refinedev/inferencer. Inferencer exports HeadlessListInferencer, HeadlessShowInferencer, HeadlessEditInferencer, HeadlessCreateInferencer, and finally HeadlessInferencer components, the last of which combines all in one place.

grsh•4mo ago

grsh•4mo ago

I menage to make little bit by add wasp route

route ProductsRoute { path: "/products", to: ProductsPage }
page ProductsPage {
  component: import { ProductsList } from "@src/pages/products/index"
}

route ProductsRoute { path: "/products", to: ProductsPage }
page ProductsPage {
  component: import { ProductsList } from "@src/pages/products/index"
}

remove Refine code from MainPage

export const MainPage = () => {
  return (
    <div className="container">
      <main>
        <div>hello</div>
      </main>
    </div>
  )
}

export const MainPage = () => {
  return (
    <div className="container">
      <main>
        <div>hello</div>
      </main>
    </div>
  )
}

add code to Refine and AntdListInferencer list.tsx (this file is generated form Refine

import { Refine } from "@refinedev/core";
import { AntdInferencer, AntdListInferencer } from "@refinedev/inferencer/antd";
import { HeadlessListInferencer } from "@refinedev/inferencer/headless";
import { dataProvider } from "../../providers/data-provider";

const API_URL = "https://api.fake-rest.refine.dev"

export const ProductsList = () => {
    return (
        <Refine dataProvider={dataProvider(API_URL)}>
            <AntdListInferencer />
        </Refine>
        
    );
};

import { Refine } from "@refinedev/core";
import { AntdInferencer, AntdListInferencer } from "@refinedev/inferencer/antd";
import { HeadlessListInferencer } from "@refinedev/inferencer/headless";
import { dataProvider } from "../../providers/data-provider";

const API_URL = "https://api.fake-rest.refine.dev"

export const ProductsList = () => {
    return (
        <Refine dataProvider={dataProvider(API_URL)}>
            <AntdListInferencer />
        </Refine>
        
    );
};

grsh•4mo ago

result

grsh•4mo ago

i found this information about Interacer

Please note that the Inferencer components are not meant to be used in production. They are meant to be used in development mode to help you generate the code for your components.

Please note that the Inferencer components are not meant to be used in production. They are meant to be used in development mode to help you generate the code for your components.

miho•4mo ago

What kind of errors do you see in the browser console? (Inspect elemnt console) Do you see any errors in the terminal? How does your package.json look?

grsh•4mo ago

For now, I used generated code to do some research and it works with WASP. I will let you know when I dig deeper. Thanks 🙂

Gaming

Programming

implementation of refinedev/inferencer