SolidJS•13mo ago

Mutate createServerData$ resource

I have a route component that renders countries:

export function routeData() {
  const countries = createServerData$(() => prisma.country.findMany());
  const session = createServerData$(async (_, event) => {
    return getSession(event.request, authOptions);
  });

  return {countries, session}
}

export default () => {
  // Get data at start of app
  const {countries, session} = useRouteData<typeof routeData>();


  return (
    <main>
      <Show when={countries()} fallback={"Loading..."} keyed>
        {(countries) => (
          <For each={countries} fallback={"No items"}>
            {country => {
              const coordsFormatted = `(lat=${country.lat}, lng=${country.lng})`;
              return <div>
                <h3>{country.name}</h3>
                <p>{coordsFormatted}</p>
              </div>
            }}
          </For>
        )}
      </Show>
    </main>
  );
}

export function routeData() {
  const countries = createServerData$(() => prisma.country.findMany());
  const session = createServerData$(async (_, event) => {
    return getSession(event.request, authOptions);
  });

  return {countries, session}
}

export default () => {
  // Get data at start of app
  const {countries, session} = useRouteData<typeof routeData>();


  return (
    <main>
      <Show when={countries()} fallback={"Loading..."} keyed>
        {(countries) => (
          <For each={countries} fallback={"No items"}>
            {country => {
              const coordsFormatted = `(lat=${country.lat}, lng=${country.lng})`;
              return <div>
                <h3>{country.name}</h3>
                <p>{coordsFormatted}</p>
              </div>
            }}
          </For>
        )}
      </Show>
    </main>
  );
}

I want to update countries() locally when pressing a button (and also on the db but I think I know how) and re-render the component. How would I go about doing this? Something like this, but getting and setting the resource on the server as well https://playground.solidjs.com/anonymous/fa0e93a0-5c83-44cc-913b-2801d96e1363

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

1 Reply

Unknown User•13mo ago

Message Not Public

Gaming

Programming

Mutate createServerData$ resource