qwik icon indicating copy to clipboard operation
qwik copied to clipboard

QwikCity previous route's `onResolve` handler called with new route's endpoint data

Open petebacondarwin opened this issue 3 years ago • 3 comments

Qwik Version

0.9.0

Operating System (or Browser)

Any

Node Version (if applicable)

Any

Which component is affected?

Qwik City

Details

Reproduction here: https://github.com/petebacondarwin/qwik-spa-data-resolve-issue

Steps to reproduce:

  • Install and start:
    npm i
    npm run dev
    
  • Navigate to the website: http://127.0.0.1:5173/.
  • Click on server-side links and see that the endpoint data is rendered as expected.
  • Click on the client-side links and see that there is an error when the old route's component onResolve render function is called with the new route's endpoint data.

petebacondarwin avatar Sep 22 '22 15:09 petebacondarwin

Related #1927 #2114

skuridin avatar Nov 15 '22 15:11 skuridin

Looks like this is still a problem in 0.14.1.

https://stackblitz.com/edit/qwik-wrong-resource?file=README.md

cmbartschat avatar Nov 26 '22 22:11 cmbartschat

I upgraded the above to 0.16.1 and still see the issue.

cmbartschat avatar Dec 18 '22 19:12 cmbartschat

Hi @petebacondarwin and @cmbartschat 👋 Sorry to be that late with a response 🙈 just gave it a spin and it looks like it is resolved with the latest versions of qwik and qwik-city 🎉

i've did this:

  • upgraded all packages to:
      "@builder.io/qwik": "0.17.5",
      "@builder.io/qwik-city": "0.1.1",
      "@types/eslint": "8.21.0",
      "@types/node": "latest",
      "@typescript-eslint/eslint-plugin": "5.52.0",
      "@typescript-eslint/parser": "5.52.0",
      "eslint": "8.34.0",
      "eslint-plugin-qwik": "0.17.5",
      "node-fetch": "3.3.0",
      "prettier": "2.8.4",
      "typescript": "4.9.5",
      "vite": "4.1.1",
      "vite-tsconfig-paths": "4.0.5"
    
  • npm i
  • replaced useEndpoint and onGet with the new loader handling:
import { component$, Resource } from "@builder.io/qwik";
import { loader$ } from "@builder.io/qwik-city";

export const loader = loader$(() => {
  return { two: { name: "TWO" } };
});

export default component$(() => {
  const data = loader.use();
  return (
    <Resource
      value={data}
      onResolved={(value) => <p>{value.two.name}</p>}
    ></Resource>
  );
});
  • npm run dev

would love to hear if that fixes your issue 🙏

zanettin avatar Feb 13 '23 22:02 zanettin

Thanks for the thumbs up @cmbartschat 🙏 i'll close this issue. feel free to create a new one or ping me if smth is not working 👍 happy coding!

zanettin avatar Feb 14 '23 21:02 zanettin