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.

Sign up for GitHub

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

Jump to bottom

Use createFromFetch instead of createFromReadableStream to fetch Flight #40656

Merged
merged 2 commits into from Sep 18, 2022
Merged

Use createFromFetch instead of createFromReadableStream to fetch Flight #40656

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f2f61ab
Use createFromFetch instead of createFromReadableStream to fetch Flight
timneutkens Sep 18, 2022
f5ae34c
Merge branch 'canary' into add/use-create-from-fetch
kodiakhq[bot] Sep 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
27 changes: 5 additions & 22 deletions packages/next/client/components/app-router.client.tsx
View file
Open in desktop
Expand Up @@ -2,7 +2,7 @@

import type { PropsWithChildren, ReactElement, ReactNode } from 'react'
import React, { useEffect, useMemo, useCallback } from 'react'
import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack'
import { createFromFetch } from 'next/dist/compiled/react-server-dom-webpack'
import {
AppRouterContext,
LayoutRouterContext,
Expand Down Expand Up @@ -32,11 +32,11 @@ import { useReducerWithReduxDevtools } from './use-reducer-with-devtools'
/**
* Fetch the flight data for the provided url. Takes in the current router state to decide what to render server-side.
*/
function fetchFlight(
export function fetchServerResponse(
url: URL,
flightRouterState: FlightRouterState,
prefetch?: true
): ReadableStream {
): Promise<FlightData> {
const flightUrl = new URL(url)
const searchParams = flightUrl.searchParams
// Enable flight response
Expand All @@ -50,26 +50,9 @@ function fetchFlight(
searchParams.append('__flight_prefetch__', '1')
}

// TODO-APP: Verify that TransformStream is supported.
const { readable, writable } = new TransformStream()

fetch(flightUrl.toString()).then((res) => {
res.body?.pipeTo(writable)
})

return readable
}

/**
* Fetch the flight data for the provided url. Takes in the current router state to decide what to render server-side.
*/
export function fetchServerResponse(
url: URL,
flightRouterState: FlightRouterState,
prefetch?: true
): Promise<FlightData> {
const promise = fetch(flightUrl.toString())
// Handle the `fetch` readable stream that can be unwrapped by `React.use`.
return createFromReadableStream(fetchFlight(url, flightRouterState, prefetch))
return createFromFetch(promise)
}

/**
Expand Down