Next.js Discord

Discord Forum

Invalid state: Readable stream is blocked when using fetch cache: no-store

Answered
Forest bachac posted this in #help-forum
Open in Discord
Forest bachacOP
Currently, I am trying to send a DELETE request to my nextjs backend/api folder from the client.

Although, if a delete request is sent twice with the same body, irregardless of the server response, I get a typeerror, readable stream is blocked.
Answered by Northeast Congo Lion
looks like you can't include a body in nextjs DELETE requests.
View full answer

13 Replies

Forest bachacOP
Stack trace:

TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is locked
    at new NodeError (node:internal/errors:399:5)
    at setupReadableStreamDefaultReader (node:internal/webstreams/readablestream:2156:11)
    at new ReadableStreamDefaultReader (node:internal/webstreams/readablestream:823:5)
    at ReadableStream.getReader (node:internal/webstreams/readablestream:346:14)
    at pipeReadable (/path/to/next/dist/server/pipe-readable.js:27:29)
    at sendResponse (/path/to/next/dist/server/send-response.js:40:50)
    at doRender (/path/to/next/dist/server/base-server.js:1112:58)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async cacheEntry.responseCache.get.incrementalCache.incrementalCache (/path/to/next/dist/server/base-server.js:1291:28)
    at async /path/to/next/dist/server/response-cache/index.js:99:36 {
  code: 'ERR_INVALID_STATE'
}
Fetch request:

import { throwError } from "@/utils/error";

export default async function delete_page(
  _id: string
): Promise<number | false> {
  try {
    const response: Response = await fetch("/api/pages", {
      method: "DELETE",
      headers: {
        // Add any headers if needed, such as authorization
        // "Authorization": "Bearer YOUR_ACCESS_TOKEN",
        "Content-Type": "application/json", // Specify the content type if sending JSON data
      },
      body: JSON.stringify({
        _id: _id,
      }),
      cache: "no-store",
    });
    // if (response.ok) {
    //   return 200;
    // } else {
    //   return false;
    // }
    return false;
  } catch (error: any) {
    throwError(error, "delete_page");
    return false;
  }
}
its called like this delete_page("610bdf3f5a4bda001cfaf064"); (random id string)
Northeast Congo Lion
check this out: https://github.com/vercel/next.js/discussions/48072
This guy is having your same issue, looks like, and came to a good answer
Northeast Congo Lion
looks like you can't include a body in nextjs DELETE requests.
Answer
Northeast Congo Lion
change to a POST endpoint and you should be alright.
Forest bachacOP
ah ok
weird how it only breaks sometimes
Forest bachacOP
Now I'm gettting

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async invokeRequest (/Users/.../Code/text-editor/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:21:12)
    at async requestHandler (/Users/.../Code/text-editor/node_modules/next/dist/server/lib/start-server.js:336:33)
    at async Server.<anonymous> (/Users/.../Code/text-editor/node_modules/next/dist/server/lib/start-server.js:152:13) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at write (node:internal/deps/undici/undici:9949:41)
      at _resume (node:internal/deps/undici/undici:9927:33)
      at resume (node:internal/deps/undici/undici:9829:7)
      at process.processTicksAndRejections (node:internal/process/task_queues:81:21) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}
@Northeast Congo Lion check this out: https://github.com/vercel/next.js/discussions/48072
Forest bachacOP
import { throwError } from "@/utils/error";

export default async function delete_page(
  _id: string
): Promise<number | false> {
  try {
    const response: Response = await fetch(`/api/pages/${_id}`, {
      method: "DELETE",
      cache: "no-store",
    });
    if (response.ok) {
      return 200;
    } else {
      return false;
    }
  } catch (error: any) {
    throwError(error, "delete_page");
    return false;
  }
}
this might ac just have been patched but not be released. im going to see if it works in canary bc of

https://github.com/vercel/next.js/pull/53843
I was right it was fixed but its not working in next@latest just yet