Mutate createServerData$ resource

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>
  );
}