Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calling an specific endpoint stalls .json with the special fetch #41988

Closed
1 task done
icyJoseph opened this issue Oct 27, 2022 · 2 comments
Closed
1 task done

Calling an specific endpoint stalls .json with the special fetch #41988

icyJoseph opened this issue Oct 27, 2022 · 2 comments
Labels
bug Issue was opened via the bug report template.

Comments

@icyJoseph
Copy link
Contributor

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

❯ npx next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.14.0
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: 7.11.0
    Relevant packages:
      next: 13.0.1-canary.0
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Calling this endpoint using the app fetch, "https://pokeapi.co/api/v2/pokemon/1" causes .json() to stall. I've tried with 1, 4, 5, and a few others.

Expected Behavior

.json() should not stall.

Link to reproduction

https://github.com/icyJoseph/next-13-app-json-stall

To Reproduce

Create a next-app with:

And fill the landing page with:

const specieEP = "https://pokeapi.co/api/v2/pokemon-species";
const pokeEp = "https://pokeapi.co/api/v2/pokemon";

const fetchPokemon = async (id: number | string) => {
  const specie = await fetch(`${specieEP}/${id}`);
  const poke = await fetch(`${pokeEp}/${id}`);

  const specieData = await specie.json();
  // const pokeData = {};
  const pokeData = await poke.json(); // this stalls

  return { ...specieData, ...pokeData };
};

export default async function Home() {
  const pokemon = await fetchPokemon(1);

  return <div>{pokemon.name}</div>;
}

Observe that the page stalls, you can sprinkle logs to see that const pokeData = await poke.json(); stalls. What could possibly cause that specifically? The same pattern works in https://next-js-react-gbg.vercel.app/pokemon/151 which uses pages.

Comment out pokeData and swap it by the empty object, then the page renders.

@icyJoseph icyJoseph added the bug Issue was opened via the bug report template. label Oct 27, 2022
@icyJoseph icyJoseph changed the title Calling an specific endpoint stalls with the special fetch Calling an specific endpoint stalls .json with the special fetch Oct 27, 2022
@icyJoseph
Copy link
Contributor Author

Closing as duplicate of #41853

@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

1 participant