Skip to content
Welcome to the new, unified Livepeer documentation! 👋


Hook for retrieving Stream Sessions (opens in a new tab) based on the parent stream's unique identifier.


import { useStreamSessions } from '@livepeer/react';

The following examples assume a Stream was created via via useCreateStream or directly via a provider's API/dashboard. If a falsy stream ID is provided, the query will be skipped.

function SomeComponent() {
  const { data: streamSessions } = useStreamSessions(stream?.id);

Return Value

The return value is partially based on React Query (opens in a new tab), with some return types aggregated for simplicity.

  data?: StreamSession[],
  error?: Error,
  status: 'idle' | 'loading' | 'success' | 'error',
  isError: boolean,
  isFetched: boolean,
  isFetching: boolean,
  isIdle: boolean,
  isLoading: boolean,
  isRefetching: boolean,
  isSuccess: boolean,
  refetch: (options: RefetchOptions) => Promise<UseQueryResult>,



The stream identifier for the parent stream. Can also be a string passed as the only parameter.

function SomeComponent() {
  const { data: streamSessions } = useStreamSessions({


The useStreamSessions hook also supports any React Query (opens in a new tab) useQuery options, such as refetchInterval or enabled. These override any configs passed by default by the internal hook.

function SomeComponent() {
  const { data: streamSessions } = useStreamSessions({
    refetchInterval: (streamSessions) =>
      (streamSessions?.length ?? 0) === 0 ? 5000 : false,



The following section only applies to web-based use-cases - React Native has no concept of SSR.


The useStreamSessions hook also comes with a React Query (opens in a new tab) prefetch query, prefetchStreamSessions, which makes it easy to prefetch data for server-side rendering.

First, you add a getStaticProps (opens in a new tab) function to the page which you want to prefetch data on. The props should match the useStreamSessions hook to ensure that the correct data is prefetched.

// pages/demo.tsx
import { prefetchStreamSessions, studioProvider } from '@livepeer/react';
export const getStaticProps = async () => {
  const dehydratedState = await prefetchStreamSessions(
    { streamId },
    { provider: studioProvider({ apiKey: 'yourStudioApiKey' }) },
  return {
    props: {
    revalidate: 600,

We need to update the _app.tsx to pass the dehydratedState in pageProps to the LivepeerConfig. We also move the livepeerClient into a useMemo hook so that a new client is created on each request.

// pages/_app.tsx
import {
} from '@livepeer/react';
import type { AppProps } from 'next/app';
import { useMemo } from 'react';
function App({ Component, pageProps }: AppProps<{ dehydratedState: string }>) {
  // we create a new livepeer client on each request so data is
  // not shared between users
  const livepeerClient = useMemo(
    () =>
        provider: studioProvider({
          apiKey: process.env.NEXT_PUBLIC_STUDIO_API_KEY,
  return (
      <Component {...pageProps} />

That's it! You now have data prefetching on the server, which is passed to the browser and used to hydrate the initial query client.

Other Frameworks

The process is very similar for other frameworks, with the exception that there is a clearClient boolean which should be used to ensure that the client cache is not reused across users.

import { prefetchStreamSessions, studioProvider } from '@livepeer/react';
export const handleRequest = async (req, res) => {
  const dehydratedState = await prefetchStreamSessions(
      clearClient: true,
    { provider: studioProvider({ apiKey: 'yourStudioApiKey' }) },
  // sanitize the custom SSR generated data
        <div id="root">${html}</div>
          window.__REACT_QUERY_STATE__ = ${yourSanitizedDehydratedState};