useEndpoint returns undefined data after client-side navigation

[cmbartschat]

Qwik Version

0.9.0

Operating System (or Browser)

Ubuntu/Firefox

Node Version (if applicable)

18.7.0

Which component is affected?

Qwik City

Expected Behaviour

In my Qwik City project, if I use <Link> to navigate from a page with an onGet (let's call it the "dynamic" page), to one without an onGet (static), I would expect that even if we need to "render" the dynamic page to do unmount effects or something like that, the useEndpoint result should return the actual data that was loaded initially.

Actual Behaviour

I'm seeing that the the component for the dynamic page is rendered with useEndpoint returning a {state: 'resolved', resolved: undefined} resource.

Additional Information

This is my repro case which is the base npm create qwik@latest with the following changes:

src/routes/echo/[text]/index.tsx

import { component$, Resource } from "@builder.io/qwik";
import {
  DocumentHead,
  RequestHandler,
  useEndpoint,
} from "@builder.io/qwik-city";

type EndpointData = {
  text: string;
  timestamp: number;
  env: string;
};

export const onGet: RequestHandler<EndpointData> = async ({ params }) => {
  await new Promise((resolve) => setTimeout(resolve, 300));
  return {
    text: params.text,
    timestamp: Date.now(),
    env: typeof window === "undefined" ? "server" : "browser",
  };
};

export default component$(() => {
  const resource = useEndpoint<typeof onGet>();
  console.log(
    "rendering dynamic page, resource, state:",
    resource.state,
    "resolved:",
    resource.resolved
  );
  return (
    <Resource
      value={resource}
      onPending={() => <div>Loading...</div>}
      onRejected={() => <div>Error</div>}
      onResolved={(data) => (
        console.log("showing resolved data", data),
        data ? (
          <>
            <h1>{data.text}</h1>
            <p>Date: {new Date(data.timestamp).toString()}</p>
            <p>Env: {data.env}</p>
          </>
        ) : (
          <p>No data</p>
        )
      )}
    />
  );
});

export const head: DocumentHead = {
  title: "Echo",
};

src/components/header/header.tsx

import { component$, useStylesScoped$ } from "@builder.io/qwik";
import { Link } from "@builder.io/qwik-city";
import { QwikLogo } from "../icons/qwik";
import styles from "./header.css?inline";

export default component$(() => {
  useStylesScoped$(styles);

  return (
    <header>
      <div class="logo">
        <Link href="/">
          <QwikLogo />
        </Link>
      </div>
      <ul>
        <li>
          <Link href="/echo/alpha">Alpha</Link>
        </li>
        <li>
          <Link href="/echo/bravo">Bravo</Link>
        </li>
        <li>
          <Link href="/echo/charlie">Charlie</Link>
        </li>
      </ul>
    </header>
  );
});

It occurs for both npm run dev and npm run preview.

[cmbartschat]

I believe this could be a symptom of the broader issue here: https://github.com/BuilderIO/qwik/issues/1398

[zanettin]

Hi @cmbartschat Since the referenced issue could be closed i am curious if you could try to do the mentioned steps as well on your side and use the newly available loader$ functions. Please let me know if i can give you a hand somehow 🙏

[cmbartschat]

Yep, now that loader$ is released in earnest, there's no more problems here!