Wasp-lang•6mo 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•6mo 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•6mo ago

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

kapa.ai•6mo 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•6mo ago

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

martinsos•6mo 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?

grshOP•6mo 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.

grshOP•6mo ago

grshOP•6mo 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>
        
    );
};

grshOP•6mo ago

result

grshOP•6mo 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•6mo 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?

grshOP•5mo 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