Amir Hossein Hashemi Posts - Answer Overflow

Amir Hossein Hashemi

Explore posts from servers

•Created by Amir Hossein Hashemi on 2/27/2025 in #support

When, and what types of errors <ErrorBoundary> catch?

The docs are not clear about exactly what types of errors are caught by <ErrorBoundary>. My understanding is that: <ErrorBoundary> catches any error that occurs during rendering or updating its children. That includes: - Errors that occur while rendering the JSX. - Errors that occur within createEffect, createMemo, and other synchronous state management primitives.
But errors occurring outside the rendering process, for example, in event handlers or after a setTimeout or async work are not caught by error boundaries. Is that accurate? Are there other scenarios that I'm missing?

6 replies

SSolidJS

•Created by Amir Hossein Hashemi on 2/13/2025 in #support

I can't initialize a session

In this code, I use useSession to create a session and initialize it with "light" if it doesn't have a value:

import { createAsync, query } from "@solidjs/router";
import { useSession } from "vinxi/http";

type SessionData = {
  theme: "light" | "dark";
};

const getTheme = query(async () => {
  "use server";
  const session = await useSession<SessionData>({
    password: process.env.SESSION_SECRET as string,
    name: "theme",
  });

  if (!session.data.theme) {
    await session.update({
      theme: "light",
    });
  }

  return session.data.theme;
}, "getTheme");

export function ThemeToggle() {
  const theme = createAsync(() => getTheme());

  return <p>theme: {theme()}</p;
}

import { createAsync, query } from "@solidjs/router";
import { useSession } from "vinxi/http";

type SessionData = {
  theme: "light" | "dark";
};

const getTheme = query(async () => {
  "use server";
  const session = await useSession<SessionData>({
    password: process.env.SESSION_SECRET as string,
    name: "theme",
  });

  if (!session.data.theme) {
    await session.update({
      theme: "light",
    });
  }

  return session.data.theme;
}, "getTheme");

export function ThemeToggle() {
  const theme = createAsync(() => getTheme());

  return <p>theme: {theme()}</p;
}

When I start the application for the first time, or when I manually remove the theme cookie in the devtools and refresh the page, I get this error:

Cannot set headers after they are sent to the client

Cannot set headers after they are sent to the client

I don't exactly understand why I get the error. In seems like calling useSession immediately sends the response to the client, so session.update() fails because the response is already sent. That's not what expected to happen. Am I doing something wrong?

4 replies

SSolidJS

•Created by Amir Hossein Hashemi on 2/7/2025 in #support

Component routing vs config-based routing

In Solid Router, what's the difference between component routing and config-based routing? Is the a particular reason someone wants to use one over the other?

2 replies

SSolidJS

•Created by Amir Hossein Hashemi on 2/4/2025 in #support

Using useNavigate within client-only action/query

The docs says:

If you are inside of a cache or action function you will instead [of useNavigate] want to use redirect or reload.

Does that include query/actions that only run on the client (don't use "use server")?

8 replies

SSolidJS

•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 genetic-orange 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 conscious-sapphire on 10/20/2023 in #ask-any-question

Why useDelete calls getIdentity from auth-provider?

26 replies

RRefine

•Created by like-gold 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 genetic-orange 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 compatible-crimson 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 rival-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 genetic-orange 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