zomh Posts - Answer Overflow

zomh

Explore posts from servers

RRailway RRefine TTCTheo's Typesafe Cult

•Created by xenial-black on 3/12/2024 in #ask-any-question

Refine and Server Components

Hello, is there any info regarding Refine and server components? I found this blog post: https://refine.dev/blog/react-server-components/#pros-and-cons-of-react-server-components It's very well written but it does not say anything about refine and server components. I searched in Discord but did not really find a lot. I know Refine does support Nextjs and Nextjs (i think 13+) does use server components. So how does that integrate with Refine and e.g. it's data providers? Some data providers use a axios instance to fetch. Can someone provide an overview of what's already supported, what's on the roadmap and what's outside of scope regarding Refine and server components? Thank you

6 replies

RRefine

•Created by eastern-cyan on 7/11/2023 in #ask-any-question

resource.route is deprecated

12 replies

RRefine

•Created by afraid-scarlet on 7/5/2023 in #ask-any-question

useSelect typing when using optionLabel and optionValue

I am using useSelect with optionLable and optionValue as described here: https://refine.dev/docs/api-reference/core/hooks/useSelect/#optionlabel-and-optionvalue How to type useSelect when using Object path syntax?

   const { options, queryResult } = useSelect<IRevenueResponseResultOnly>({
      resource: "revenue",

      filters: [
         { field: "financialplan][id]", operator: "eq", value: selectedFinplan },
         { field: "resultsonly", operator: "eq", value: true },
      ],

      

      optionLabel: "revenuestream.base.name",
      optionValue: "revenuestream.basisangaben.id",

      queryOptions: {
         queryKey: ["revenue", selectedFinplan],
         enabled: selectedFinplan > 0 ? true : false,
      },
      
   })

   const { options, queryResult } = useSelect<IRevenueResponseResultOnly>({
      resource: "revenue",

      filters: [
         { field: "financialplan][id]", operator: "eq", value: selectedFinplan },
         { field: "resultsonly", operator: "eq", value: true },
      ],

      

      optionLabel: "revenuestream.base.name",
      optionValue: "revenuestream.basisangaben.id",

      queryOptions: {
         queryKey: ["revenue", selectedFinplan],
         enabled: selectedFinplan > 0 ? true : false,
      },
      
   })

optionLabel and optionValue give a typescript error: Type '"revenuestream.basisangaben.name"' is not assignable to type 'keyof IRevenueResponseResultOnly'.ts(2322)

6 replies

RRefine

•Created by optimistic-gold on 7/1/2023 in #ask-any-question

Headless Navigation / Headless EditButton

I am in the process of migrating to a headless UI in my refine project. I was just implementing a Edit Button and was wondering if my implementation was really the way to go. Here is my implementation:

 {
      id: "actions",
      header: "Edit",
      accessorKey: "revenuestream.id",
      maxSize: 100,
      cell: function render({ table, row, getValue }) {
         const umsatzpostenId = getValue()
         const getToPath = useGetToPath()
         const { resource } = useResource(table.options.data[0].revenuestream.slug);
      
         const go = useGo()
         const editPath = getToPath({
            action: "edit",
            resource: resource,
            meta: {
               id: umsatzpostenId,
               
            },
         })
  

         return (
            <div>
               {/* OLD WAY with MUI <EditButton
                  className="text-black bg-primary hover:bg-primary/75"
                  resourceNameOrRouteName="revenue-subscriptionmodels"
                  hideText
                  recordItemId={umsatzpostenId}
                  resource={table.options.data[0].revenuestream.slug}
               /> */}
               <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                     go({
                        to: editPath,
                     })
                  }}
               >
                  <Edit className="h-4 w-4 text-primary" />
               </Button>
            </div>
         )
      },
   },

 {
      id: "actions",
      header: "Edit",
      accessorKey: "revenuestream.id",
      maxSize: 100,
      cell: function render({ table, row, getValue }) {
         const umsatzpostenId = getValue()
         const getToPath = useGetToPath()
         const { resource } = useResource(table.options.data[0].revenuestream.slug);
      
         const go = useGo()
         const editPath = getToPath({
            action: "edit",
            resource: resource,
            meta: {
               id: umsatzpostenId,
               
            },
         })
  

         return (
            <div>
               {/* OLD WAY with MUI <EditButton
                  className="text-black bg-primary hover:bg-primary/75"
                  resourceNameOrRouteName="revenue-subscriptionmodels"
                  hideText
                  recordItemId={umsatzpostenId}
                  resource={table.options.data[0].revenuestream.slug}
               /> */}
               <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                     go({
                        to: editPath,
                     })
                  }}
               >
                  <Edit className="h-4 w-4 text-primary" />
               </Button>
            </div>
         )
      },
   },

Do really have to call 3 hooks to navigate to edit a certain resource or is there a better way?

8 replies

RRefine

•Created by afraid-scarlet on 4/6/2023 in #ask-any-question

Deployment to Vercel 404 not found when pasting URL

8 replies

RRefine

•Created by like-gold on 3/28/2023 in #ask-any-question

Sider and Top Menu

7 replies

RRefine

•Created by conscious-sapphire on 1/17/2023 in #ask-any-question

Howto set saveButtonProps.onClick correctly?

I am trying to overwrite the saveButtonProps.onClick function. However i cant quite get it:

  const reactHookFormMethods = useStepsForm<BaseRecord, HttpError, ExpenseStartupAPI>({
    refineCoreProps: {
      action: "edit",
      metaData: {
        populate: ["administration", "businessplan", "vermittlung","geschaeftsausstattung","weitereKosten"],
      },
    },   
  })
...

  const {handleSubmit, refineCore:{onFinish}} = reactHookFormMethods

  reactHookFormMethods.saveButtonProps.onClick = (e) => {
    console.log("saveButtonProps onclick is executed",e)
     handleSubmit((values) => {
        console.log("iam in hanldesubmit")
        const convertedDate = new Date(values.start).toJSON()
        values.start = convertedDate
        // @ts-ignore
        values.financialplan = 14
        console.log("🚀 ThIS DATA IS SENT TO BACKEND::::::::::::::::::: ~ file: edit.tsx:64 ~ handleSubmit ~ values", values)
        onFinish(values)
     })
  }

  const reactHookFormMethods = useStepsForm<BaseRecord, HttpError, ExpenseStartupAPI>({
    refineCoreProps: {
      action: "edit",
      metaData: {
        populate: ["administration", "businessplan", "vermittlung","geschaeftsausstattung","weitereKosten"],
      },
    },   
  })
...

  const {handleSubmit, refineCore:{onFinish}} = reactHookFormMethods

  reactHookFormMethods.saveButtonProps.onClick = (e) => {
    console.log("saveButtonProps onclick is executed",e)
     handleSubmit((values) => {
        console.log("iam in hanldesubmit")
        const convertedDate = new Date(values.start).toJSON()
        values.start = convertedDate
        // @ts-ignore
        values.financialplan = 14
        console.log("🚀 ThIS DATA IS SENT TO BACKEND::::::::::::::::::: ~ file: edit.tsx:64 ~ handleSubmit ~ values", values)
        onFinish(values)
     })
  }

Inside another Component:

...
      <Edit
         isLoading={formLoading}
         saveButtonProps={saveButtonProps}
         ...
      />

...
      <Edit
         isLoading={formLoading}
         saveButtonProps={saveButtonProps}
         ...
      />

The first console.log gets fired console.log("saveButtonProps onclick is executed",e) However the second one is not reached Can someone help thank you

5 replies

RRefine

•Created by fascinating-indigo on 1/14/2023 in #ask-any-question

useTable Typing error is unkown

12 replies

RRefine

•Created by other-emerald on 1/11/2023 in #ask-any-question

Mutation Mode

3 replies

RRefine

•Created by equal-aqua on 12/16/2022 in #ask-any-question

useFieldArray's update() and replace() reset Dirtyfields in Edit

This is a wierd one. When using update() or replace() method from useFieldArray. The Dirtyfields do get reset while in <Edit> View which seems wrong. Same scenario in <Create> View works, however. Steps to reproduce: Visit codesandbox i prepared: https://codesandbox.io/p/github/capsloq/form-react-hook-form-use-steps-form 1. Click Create Post 2. Type something into Title Field 3. Go To Step 2 by clicking Next 4. Klick "klick this to use update()" button 5. Notice that title is still dirty after clicking the button ✅ 6. If you go back to Step 1 you will see that the Title you typed is still there. Now go back to all posts (/posts) 1. Click on the Edit Button of one post 2. Type something into Title Field 3. Go To Step 2 by clicking Next 4. Klick "klick this to use update()" button 5. Notice that title is not dirty anymore after clicking the button and the value form Step 1 is lost ❌ Is that intentional or whats happening here? I was not able to reproduce that with the original react-hook-form. Thank you

7 replies

RRefine

•Created by continuing-cyan on 12/8/2022 in #ask-any-question

Custom Sider render property Type Error

7 replies

RRefine

•Created by united-yellow on 12/7/2022 in #ask-any-question

Make useSearchParams() hook available in pankodrefine-react-router-v6

Is it possible to make React Router's useSearchParams hook available through refine-react-router-v6? https://reactrouter.com/en/main/hooks/use-search-params I know one could format and parse searchparams with the help of a third party package but the built in hook seems more convenient. 🥺 Correct me if its already possible. Thank you

21 replies

RRefine

•Created by correct-apricot on 12/3/2022 in #ask-any-question

use router v6 with search params

Hello 👋 i am trying to programmatically redirect to the create view of a resource and passing some search params. My code is redirecting correctly but there are no search params in the url:

import { useNavigation } from "@pankod/refine-core";
...
const { push, goBack, createUrl } = useNavigation();
...
 const customSubmit = (values: FieldValues) => {   
   // push to path with query params
   push(createUrl(resourcename), { search: '?sort=date&order=newest'})
   
  }

import { useNavigation } from "@pankod/refine-core";
...
const { push, goBack, createUrl } = useNavigation();
...
 const customSubmit = (values: FieldValues) => {   
   // push to path with query params
   push(createUrl(resourcename), { search: '?sort=date&order=newest'})
   
  }

Can someone point me in the right direction? Thank you

7 replies

Gaming

Programming