串流與上傳

Core 的 callApiStream 逐行讀取 NDJSON 響應並在 Observable 中按順序發出。

在 Core 中直接使用 callApiStream

當伺服器返回 NDJSON（每行一個 JSON）時使用 callApiStream。若沒有 Accept header，則將 application/x-ndjson 設為預設值，若需要其他媒體類型，可以在每次請求的 headers 中覆蓋。

export const streamEvents = () => {
  return client.callApiStream<{
    eventName: string;
    content: unknown;
  }>({
    url: "/api/event/stream",
    method: "get",
    // headers: { Accept: "application/x-ndjson" },
  });
};

NDJSON 響應格式

text

{"status":"STARTED","progress":0}
{"status":"PROGRESS","progress":35}
{"status":"PROGRESS","progress":80}
{"status":"DONE","progress":100}

callApiStream根據換行符分割響應並對每行進行 JSON.parse。期待的是 NDJSON，而不是標準 SSE 的 data: frame 格式。

Observable 訂閱和取消訂閱

tsx

const subscription = streamEvents().subscribe({
  next: (event) => {
    setProgress(event.content);
  },
  error: (error) => {
    setErrorMessage(error.message);
  },
  complete: () => {
    setRunning(false);
  },
});

return () => subscription.unsubscribe();

unsubscribe() 將取消內部 ReadableStream reader。請在 React effect 或工作清理中取消訂閱。

選擇：使用生成的 stream 服務

在使用 OpenAPI generator 的專案中，可以使生成的服務調用 stream 端點的 callApiStream。界面上以與一般生成服務相同的方式導入並訂閱。

tsx

const subscription = jobProgress({
  path: { jobId },
}).subscribe({
  next: (event) => {
    setProgress(event.progress || 0);
  },
  error: (error) => {
    setErrorMessage(error.message);
  },
  complete: () => {
    setRunning(false);
  },
});

return () => subscription.unsubscribe();

uploadFile：將文件 PUT 到指定 URL

uploadFile.ts

service.uploadFile({
  file,
  url: signedUploadUrl,
  headers: {
    "Content-Type": file.type || "application/octet-stream",
    "If-None-Match": "*",
  },
}).subscribe();

uploadFile header 操作

uploadFile 內部有默認 header 合併代碼，但實際的 fromFetch 調用使用傳遞的 headers。所需的 Content-Type、If-None-Match 等 header 請在調用時直接傳遞。