useFragment

Reads a fragment reference into typed data. The component re-renders whenever the underlying cache record changes.

import { graphql, useFragment } from '$houdini'
import type { UserAvatar_user } from '$houdini'

export function UserAvatar({ user }: { user: UserAvatar_user }) {
  const data = useFragment(user, graphql(`
    fragment UserAvatar_user on User {
      name
      avatarUrl
    }
  `))

  if (!data) return null
  return <img src={data.avatarUrl} alt={data.name} />
}

Signature

function useFragment(reference, document): data | null

Parameter	Type	Description
reference	fragment prop	The masked reference passed from the parent
document	graphql() result	The fragment document

Returns the fragment data, or null if the reference is null.

Plural fragments

If the fragment is marked with @plural, it is spread on a list field and the reference is an array. In that case useFragment accepts the whole array and returns an array of data:

import { graphql, useFragment } from '$houdini'
import type { ShowListRow } from '$houdini'

export function ShowList({ shows }: { shows: ShowListRow }) {
  const data = useFragment(shows, graphql(`
    fragment ShowListRow on Show @plural {
      title
    }
  `))

  return (
    <ul>
      {data.map((show) => (
        <li key={show.title}>{show.title}</li>
      ))}
    </ul>
  )
}

See Plural Fragments for the full picture.