Amir Hossein Hashemi Posts - Answer Overflow

Amir Hossein Hashemi

Explore posts from servers

•Created by Amir Hossein Hashemi on 12/31/2024 in #support

Why submission result doesn't update?

In the component below, it appears that submission does not update when the action does not return anything.

import { action, useSubmission } from "@solidjs/router";
import { Show } from "solid-js";

const addPost = action(async (formData: FormData) => {
  const title = formData.get("title") as string;
  if (!title || title.length < 4) {
    return {
      isError: true,
      error: "Title must be at least 4 characters",
    };
  }
  console.log("Post added: ", { title });
}, "addPost");

export default function Page() {
  const submission = useSubmission(addPost);
  return (
    <form action={addPost} method="post">
      <input name="title" />
      <Show when={submission.result?.isError}>
        <p>{submission.result?.error}</p>
      </Show>
      <button>Submit</button>
    </form>
  );
}

import { action, useSubmission } from "@solidjs/router";
import { Show } from "solid-js";

const addPost = action(async (formData: FormData) => {
  const title = formData.get("title") as string;
  if (!title || title.length < 4) {
    return {
      isError: true,
      error: "Title must be at least 4 characters",
    };
  }
  console.log("Post added: ", { title });
}, "addPost");

export default function Page() {
  const submission = useSubmission(addPost);
  return (
    <form action={addPost} method="post">
      <input name="title" />
      <Show when={submission.result?.isError}>
        <p>{submission.result?.error}</p>
      </Show>
      <button>Submit</button>
    </form>
  );
}

Let's say I enter "12" in the input field and submit the form. In this case, submission.result would be:

{
  isError: true,
  error: "Title must be at least 4 characters",
}

{
  isError: true,
  error: "Title must be at least 4 characters",
}

After that, I input "34" into the field, which passes the validation. I expected that since the action does not return anything in this scenario, submission.result should be undefined and the error message should not be displayed. However, it seems that submission.result does not update at all. I must return something from the action to update the submission result. Can you explain why this happens? I couldn't find any documentation about it.

8 replies

RRefine

•Created by unwilling-turquoise on 11/8/2023 in #ask-any-question

How to disable authentication in a page?

I'm using the Next.js router provider and I want to disable authentication in specific page, for example /docs. How should I do that?

12 replies

RRefine

•Created by frozen-sapphire on 10/20/2023 in #ask-any-question

Why useDelete calls getIdentity from auth-provider?

26 replies

RRefine

•Created by ratty-blush on 1/6/2023 in #ask-any-question

Reducing bundle size

The bundle size of my Refine app built with Next.js and Material UI is very high and the app is very slow. I'm looking for ways to reduce the bundle size. This is the bundle:

┌   /_app                                  0 B             551 kB
├ λ /[[...refine]]                         249 B           551 kB
└ ○ /404                                   184 B           551 kB
+ First Load JS shared by all              551 kB
  ├ chunks/framework-305dbdef56d67aa9.js   45.4 kB
  ├ chunks/main-a8eaa706e962a5d6.js        27.9 kB
  ├ chunks/pages/_app-1e8eb2bf899090b0.js  476 kB
  └ chunks/webpack-44567bfec3a37904.js     1.05 kB

┌   /_app                                  0 B             551 kB
├ λ /[[...refine]]                         249 B           551 kB
└ ○ /404                                   184 B           551 kB
+ First Load JS shared by all              551 kB
  ├ chunks/framework-305dbdef56d67aa9.js   45.4 kB
  ├ chunks/main-a8eaa706e962a5d6.js        27.9 kB
  ├ chunks/pages/_app-1e8eb2bf899090b0.js  476 kB
  └ chunks/webpack-44567bfec3a37904.js     1.05 kB

As you can see _app.tsx is very heavy and it effects the whole app performance. How can I reduce it? One thing I tried was to remove resource page components to see the result:

┌   /_app                                  0 B             292 kB
├ λ /[[...refine]]                         249 B           292 kB
└ ○ /404                                   184 B           292 kB
+ First Load JS shared by all              292 kB
  ├ chunks/framework-305dbdef56d67aa9.js   45.4 kB
  ├ chunks/main-a8eaa706e962a5d6.js        27.9 kB
  ├ chunks/pages/_app-432b4edb6ea69894.js  217 kB
  └ chunks/webpack-44567bfec3a37904.js     1.05 kB

┌   /_app                                  0 B             292 kB
├ λ /[[...refine]]                         249 B           292 kB
└ ○ /404                                   184 B           292 kB
+ First Load JS shared by all              292 kB
  ├ chunks/framework-305dbdef56d67aa9.js   45.4 kB
  ├ chunks/main-a8eaa706e962a5d6.js        27.9 kB
  ├ chunks/pages/_app-432b4edb6ea69894.js  217 kB
  └ chunks/webpack-44567bfec3a37904.js     1.05 kB

The fact that I have to import all resource pages in the _app.tsx file has a significant effect to bundle size and speed of the app. Is there a way to fix it?

10 replies

RRefine

•Created by xenophobic-harlequin on 12/12/2022 in #ask-any-question

I can't serve the app from a sub-directory

I want the base path of my app be /admin/. So for example the users list page would be /admin/users. I followed your instructions : Serving the application from a subdirectory (https://refine.dev/docs/api-reference/core/providers/router-provider/#serving-the-application-from-a-subdirectory) I have a CustomRouterComponent component:

const { RouterComponent, location } = routerProvider;

const CustomRouterComponent = () => (
  <RouterComponent location={location} basepath="/admin" />
);

const { RouterComponent, location } = routerProvider;

const CustomRouterComponent = () => (
  <RouterComponent location={location} basepath="/admin" />
);

And I give it to<Refine>:

routerProvider={{
  ...routerProvider,
  RouterComponent: CustomRouterComponent,
}}

routerProvider={{
  ...routerProvider,
  RouterComponent: CustomRouterComponent,
}}

Now when I open /admin it automatically redirects to /admin/users which is a good sign but nothing renders on that page and any other page in my app. Am I missing something? I don't get any wired error in the console. I don't get a 404. Just nothing renders. All pages are empty. I'm using Vite+React+TS+React location. All of my dependencies all up-to-date. I've also tried to set base to /admin/ in vite.config.ts but it didn't help:

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  base: "/admin/",
});

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  base: "/admin/",
});

from

6 replies

RRefine

•Created by foreign-sapphire on 12/11/2022 in #ask-any-question

How to transform query results before passing them to `useForm`?

My api returns a JSON string in one of its endpoints. Something like this

{
  list: "[{id: 1}, {id: 2}]"
}

{
  list: "[{id: 1}, {id: 2}]"
}

I use this field with react-hook-form's useFieldArray to show an array of input fields to edit each list item.

  const {
    fields,
    append,
    remove,
  } = useFieldArray({
    control,
    name: "list",
  });

  const {
    fields,
    append,
    remove,
  } = useFieldArray({
    control,
    name: "list",
  });

but because list is a string and not an array it doesn't work. What's the best way to convert list to JSON before useForm hook use it? I'm trying to avoid updating my data providers as much as possible because they are already messy. Is there any way to achieve this without updating data providers?

6 replies

RRefine

•Created by xenial-black on 12/1/2022 in #ask-any-question

How to transform form data before passing it to data provider?

I have an edit page that should only send changed fields to the server instead of the whole form data. Therefore I need a way to transform the form data before passing it to data provider. What's the best way to do that? I'm using React.js with react-hook-form integration.

4 replies

RRefine

•Created by rival-black on 11/23/2022 in #ask-any-question

How to disable some filter operators?

My server only supports the eq filter operator and I want to disable the other operators. I don't want my users accidentally select an unsupported operator in the filter form. How can I do that? btw I'm using material ui.

5 replies

Gaming

Programming