Fabian Hiller Posts - Answer Overflow

Fabian Hiller

•Created by Fabian Hiller on 2/17/2023 in #support

Is it possible to create a `createCustomAction$`?

@nksaraf is it technically possible to create a custom createCustomAction$ function that builds on createServerAction$ or server$? This would allow library authors to keep the API simple, making the code more concise. Specifically, I would like to provide a SolidStart integration for my form library Modular Forms to enable the creation of progressively enhanced forms. Below is a code example.

import { createServerForm$, Field, zodForm } from "@modular-forms/solid";
import { z } from "zod";
import { TextInput, Button } from "~/components";

const loginSchema = z.object({
  email: z
    .string()
    .min(1, "Please enter your email.")
    .email("The email address is badly formatted."),
  password: z
    .string()
    .min(1, "Please enter your password.")
    .min(8, "You password must have 8 characters or more."),
});

export default function LoginRoute() {
  const [loginForm, Form] = createServerForm$<z.infer<typeof loginSchema>>({
    validate: zodForm(loginSchema),
    onSubmit: async (values) => {
      // Your code
    },
  });

  return (
    <Form>
      <Field of={loginForm} name="email">
        {(field) => (
          <TextInput
            {...field.props}
            type="email"
            label="Email"
            value={field.value}
            error={field.error}
            required
          />
        )}
      </Field>
      <Field of={loginForm} name="password">
        {(field) => (
          <TextInput
            {...field.props}
            type="password"
            label="Password"
            value={field.value}
            error={field.error}
            required
          />
        )}
      </Field>
      <Button type="submit">Login</Button>
    </Form>
  );
}

import { createServerForm$, Field, zodForm } from "@modular-forms/solid";
import { z } from "zod";
import { TextInput, Button } from "~/components";

const loginSchema = z.object({
  email: z
    .string()
    .min(1, "Please enter your email.")
    .email("The email address is badly formatted."),
  password: z
    .string()
    .min(1, "Please enter your password.")
    .min(8, "You password must have 8 characters or more."),
});

export default function LoginRoute() {
  const [loginForm, Form] = createServerForm$<z.infer<typeof loginSchema>>({
    validate: zodForm(loginSchema),
    onSubmit: async (values) => {
      // Your code
    },
  });

  return (
    <Form>
      <Field of={loginForm} name="email">
        {(field) => (
          <TextInput
            {...field.props}
            type="email"
            label="Email"
            value={field.value}
            error={field.error}
            required
          />
        )}
      </Field>
      <Field of={loginForm} name="password">
        {(field) => (
          <TextInput
            {...field.props}
            type="password"
            label="Password"
            value={field.value}
            error={field.error}
            required
          />
        )}
      </Field>
      <Button type="submit">Login</Button>
    </Form>
  );
}

10 replies

SSolidJS

•Created by Fabian Hiller on 12/27/2022 in #support

How to set a cookie when using `createRouteData` or `createServerData$`?

For user authentication it may be necessary to set a cookie. In Remix, for example, it is solved so that a loader can either directly return a value or alternatively a Response. The Response can then be used to set the Set-Cookie header. Remix seems to recognize whether the values are returned directly or via a Response, e.g. with json({...}), and interprets the types correctly when calling useLoaderData<typeof loader>(). This does not seem to work with SolidStart. Is there an alternative way? https://remix.run/docs/en/v1/route/loader

14 replies

SSolidJS

•Created by Fabian Hiller on 12/13/2022 in #support

Refetch routeData when dynamic route changes

I use a dynamic route [slug].tsx to display a blogpost for example. To get the data of the post from the database I use routeData in combination with createRouteData. Thereby I set the slug as the key. If I now navigate with a link between blogposts, routeData or createRouteData is not executed again, so the content of the dynamic route does not change. Is this intended or a bug? Do I need to use refetchRouteData to trigger this myself e.g. in createEffect?

export function routeData({ params }: RouteDataArgs) {
  return {
    post: createRouteData((key) => fetch(key), { key: params.slug }),
  };
}

export default function PostPage() {
  const { post } = useRouteData<typeof routeData>();
  return (
    <Show when={post()}>
      <h1>{post()!.title}</h1>
    </Show>
  );
}

export function routeData({ params }: RouteDataArgs) {
  return {
    post: createRouteData((key) => fetch(key), { key: params.slug }),
  };
}

export default function PostPage() {
  const { post } = useRouteData<typeof routeData>();
  return (
    <Show when={post()}>
      <h1>{post()!.title}</h1>
    </Show>
  );
}

2 replies

Gaming

Programming