Chapter 51: Data fetching

Core Idea

In Remotion, you may fetch data from an API to use it in your video. On this page, we document recipes and best practices.

Key Concepts

• Fetching data before the render<AvailableFrom v="4.0.0"/>
• When to use
• Usage
• TypeScript typing
• Colocation
• Setting the duration based on data
• Aborting stale requests
• Debouncing requests

Code Examples

type ApiResponse = {
  title: string;
  description: string;
};
type MyCompProps = {
  id: string;
  data: ApiResponse | null;
};

const MyComp: React.FC<MyCompProps> = () => null;

export const Root: React.FC = () => {
  return (
    <Composition
      id="MyComp"
      component={MyComp}
      durationInFrames={300}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        id: "1",
        data: null,
      }}
      calculateMetadata={async ({ props }) => {
        const data = await fetch(`https://example.com/api/${props.id}`);
        const json = await data.json();

        return {
          props: {
            ...props,
            data: json,
          },
        };
      }}
    />
  );
};

• What it demonstrates: Usage pattern for Data fetching from the official docs.

Key Takeaways

1. Understand fetching data before the render<availablefrom v="4.0.0"/> when working with Data fetching.
2. Understand when to use when working with Data fetching.
3. Understand usage when working with Data fetching.
4. Understand typescript typing when working with Data fetching.
5. Understand colocation when working with Data fetching.

Connects To

• Cancel Render: related page in the Hooks & Data APIs section.
• Continue Render: related page in the Hooks & Data APIs section.
• Default Props Inference: related page in the Hooks & Data APIs section.