Rvespula Posts - Answer Overflow

Rvespula

•Created by Rvespula on 1/29/2025 in #support

createResource

I'm trying to be able to reuse functions for API calls, like how it's done with React Query, but the value of data.isLoading loses reactivity when I use it in my component.

/// function
export function useGetUserById(id: string) {
  const [data] = createResource(() => getUsersIdUser(id));
  const [isLoading, setIsLoading] = createSignal(data.loading);

  createEffect(() => {
    setIsLoading(data.loading);
  });

  return {
    isLoading,
    data,
  };
}

// Use:

 const { data, isLoading } = useGetUserById(
    session.userSession.user.id,
  );

/// function
export function useGetUserById(id: string) {
  const [data] = createResource(() => getUsersIdUser(id));
  const [isLoading, setIsLoading] = createSignal(data.loading);

  createEffect(() => {
    setIsLoading(data.loading);
  });

  return {
    isLoading,
    data,
  };
}

// Use:

 const { data, isLoading } = useGetUserById(
    session.userSession.user.id,
  );

2 replies

SSolidJS

•Created by Rvespula on 6/17/2024 in #support

Redirect in production:

I have this simple action:

export const login = action(async (email: string, password: string) => {
  "use server";
  try {
    const session = await getSession();
    const userSession = await postLogin(email, password);
    await session.update(userSession);
    await trackActionEvent({
      event: "login_with_email",
      distinctId: userSession.session.id as string,
      properties: {
        email: email,
      },
    });
    console.log("SUCCESS:", userSession);
  } catch (err) {
    console.error("ERROR:", err);
    throw new Error("USER_LOGIN_ERROR");
  }
  throw redirect("/app/user");
}, 'user-login');

export const login = action(async (email: string, password: string) => {
  "use server";
  try {
    const session = await getSession();
    const userSession = await postLogin(email, password);
    await session.update(userSession);
    await trackActionEvent({
      event: "login_with_email",
      distinctId: userSession.session.id as string,
      properties: {
        email: email,
      },
    });
    console.log("SUCCESS:", userSession);
  } catch (err) {
    console.error("ERROR:", err);
    throw new Error("USER_LOGIN_ERROR");
  }
  throw redirect("/app/user");
}, 'user-login');

in development, this works fine, but in production, it doesn't work. any idea why this might be happening?

14 replies

SSolidJS

•Created by Rvespula on 5/27/2024 in #support

Context with Meta

Hi there! 🙂 I have a problem. It seems that when I try to create a custom MetaTitle with SolidMeta, the language context is not being accessed in SSR. Here is my implementation:

// Component
import { Title } from "@solidjs/meta";
import type { JSX } from "solid-js";

interface IMetaTitle {
  children: JSX.Element;
}
export function MetaTitle(props: IMetaTitle) {
  return <Title>{`${props.children} | WebsiteName`}</Title>;
}

// Component
import { Title } from "@solidjs/meta";
import type { JSX } from "solid-js";

interface IMetaTitle {
  children: JSX.Element;
}
export function MetaTitle(props: IMetaTitle) {
  return <Title>{`${props.children} | WebsiteName`}</Title>;
}

import { MetaProvider } from "@solidjs/meta";
import type { Component, JSX } from "solid-js";
import { Suspense } from "solid-js";
import { Toaster } from 'solid-toast';
import { LanguageTagProvider, useLocationLanguageTag } from "~/shared/i18n";
import { sourceLanguageTag } from "~/shared/paraglide/runtime";


interface IProviders {
  /** Content that will be wrapped by providers. */
  readonly children: JSX.Element;
}

export const Providers: Component<IProviders> = (props) => {
  const url_language_tag = useLocationLanguageTag();
  const language_tag = url_language_tag ?? sourceLanguageTag;

  return (
    <LanguageTagProvider value={language_tag}>
      <MetaProvider>
        <Suspense>{props.children}</Suspense>
        <Toaster />
      </MetaProvider>
    </LanguageTagProvider>
  );
};

import { MetaProvider } from "@solidjs/meta";
import type { Component, JSX } from "solid-js";
import { Suspense } from "solid-js";
import { Toaster } from 'solid-toast';
import { LanguageTagProvider, useLocationLanguageTag } from "~/shared/i18n";
import { sourceLanguageTag } from "~/shared/paraglide/runtime";


interface IProviders {
  /** Content that will be wrapped by providers. */
  readonly children: JSX.Element;
}

export const Providers: Component<IProviders> = (props) => {
  const url_language_tag = useLocationLanguageTag();
  const language_tag = url_language_tag ?? sourceLanguageTag;

  return (
    <LanguageTagProvider value={language_tag}>
      <MetaProvider>
        <Suspense>{props.children}</Suspense>
        <Toaster />
      </MetaProvider>
    </LanguageTagProvider>
  );
};

// route
import { MetaTitle } from "~/shared/components/metatitle";
import * as m from "~/shared/paraglide/messages.js";

export default function EmailValidationRoute() {
  return (
    <>
      <MetaTitle>{m.meta_route_email_validation()}</MetaTitle>
    </>
  );
}

// route
import { MetaTitle } from "~/shared/components/metatitle";
import * as m from "~/shared/paraglide/messages.js";

export default function EmailValidationRoute() {
  return (
    <>
      <MetaTitle>{m.meta_route_email_validation()}</MetaTitle>
    </>
  );
}

ERROR:

 throw new Error("LanguageTagCtx not found");
              ^

Error: LanguageTagCtx not found

 throw new Error("LanguageTagCtx not found");
              ^

Error: LanguageTagCtx not found

this is the context for paraglide: https://github.com/thetarnav/paraglide-solidstart-hackernews/blob/main/src/i18n/adapter.ts

7 replies

Gaming

Programming