Failed to execute 'json' on 'Response': body stream already read

Answered

English Lop posted this in #help-forum

English LopOP

2023-12-09T05:48:55.000Z

Attempted simple usage of suspense but hitting this roadblock. From what I can tell i've only read the body once

/src/app/player/page.tsx

"use client";

import { notFound, useSearchParams } from "next/navigation"
import { Suspense } from "react";
import { CircularProgress } from "@nextui-org/react";
import { PlayerHandler } from "@/components/PlayerHandler";

let body: any;


export async function PlayerHandlerWrapper({ promise }: { promise: Promise<Response> }) {
    const res = await promise
    body = body ?? await res.json()
    return <PlayerHandler questions={body.data} />
}

export default function Player() {
    const searchParams = useSearchParams()
    const id = searchParams.get('id')

    if (!id) notFound()

    const response = fetch('/api/getDoki', {
        method: 'POST',
        body: JSON.stringify({ id })
    })

    return <Suspense fallback={<CircularProgress />}>
        <PlayerHandlerWrapper promise={response} />
    </Suspense>
}

/src/components/PlayerHandler.tsx

"use client";

import { Question } from "@/helpers";
import { useState } from "react";

const enum Status {
    QuestionShown,
    Wrong,
    Correct,
}

interface PlayerState {
    status: Status
}


export function PlayerHandler({ questions }: { questions: Question[] }) {
    const [PlayerState, setPlayerState] = useState<PlayerState>({
        status: Status.QuestionShown
    })

    return <>
        {questions}
    </>
}

Answered by Ray

export default function Player({
  searchParams,
}: {
  searchParams: { id: string };
}) {
  const id = searchParams.id;

  if (!id) notFound();

  return (
    <>
      <Suspense fallback={<div>loading...</div>}>
        <PlayerHandlerWrapper id={id} />
      </Suspense>
    </>
  );
}

export async function PlayerHandlerWrapper({ id }: { id: string }) {
  const response = await fetch("http://localhost:3000/api/json", {
    method: "POST",
    body: JSON.stringify({ id }),
  });
  const body = await response.json();
  return <PlayerHandler questions={body.data} />;
}

View full answer

35 Replies

Ray

2023-12-09T05:51:01.000Z

is '/api/getDoki' a api route or external api?

@Ray is `'/api/getDoki'` a api route or external api?

English LopOP

2023-12-09T05:51:30.000Z

an api route

Ray

2023-12-09T05:52:01.000Z

can you show the code of api route

English LopOP

2023-12-09T05:52:29.000Z

import { NextRequest } from "next/server";
import { readFile } from "fs/promises";
import { join } from "path";

export async function POST(request: NextRequest) {
    const res = await request.json()
    if ("id" in res && typeof res.id === 'string') {
        try {
            const data = await readFile(join(process.cwd(), 'dokimions', res.id), 'utf8')
            return Response.json({ data })
        } catch {
            return Response.json({ data: null })
        }
    }
}

Ray

2023-12-09T06:01:24.000Z

Player is client component and PlayerHandlerWrapper is server component?

@Ray Player is client component and PlayerHandlerWrapper is server component?

English LopOP

2023-12-09T06:01:53.000Z

playerhandlerwrapper is an async component and they're all client

Ray

2023-12-09T06:02:09.000Z

async component = server component

@Ray async component = server component

English LopOP

2023-12-09T06:02:22.000Z

but it's used in the suspense

Ray

2023-12-09T06:02:33.000Z

it is still a server component

English LopOP

2023-12-09T06:02:33.000Z

isn't it just a promise of a reactnode

Ray

2023-12-09T06:02:54.000Z

and you can't import a server component in a client component

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components

@Ray it is still a server component

English LopOP

2023-12-09T06:02:57.000Z

I put "use client"; at the top though

@English Lop I put "use client"; at the top though

English LopOP

2023-12-09T06:04:30.000Z

i edited the original message to show all the code

Ray

2023-12-09T06:04:49.000Z

if you put 'use client' on top then it can't await the promise

English LopOP

2023-12-09T06:05:27.000Z

wait, if you're not supposed to use async then how would u go about using suspense with fetch

because that's the example i saw

Ray

2023-12-09T06:05:42.000Z

what example you saw?

@English Lop because that's the example i saw

English LopOP

2023-12-09T06:06:44.000Z

I guess it was incorrect

Could you please point me in the right direction as to how to properly go about doing this?

Ray

2023-12-09T06:07:45.000Z

export default function Player({
  searchParams,
}: {
  searchParams: { id: string };
}) {
  const id = searchParams.id;

  if (!id) notFound();

  return (
    <>
      <Suspense fallback={<div>loading...</div>}>
        <PlayerHandlerWrapper id={id} />
      </Suspense>
    </>
  );
}

export async function PlayerHandlerWrapper({ id }: { id: string }) {
  const response = await fetch("http://localhost:3000/api/json", {
    method: "POST",
    body: JSON.stringify({ id }),
  });
  const body = await response.json();
  return <PlayerHandler questions={body.data} />;
}