Global Data

views/_app.graphql fetches data needed by the site shell and shared systems. Typical examples are menus, settings, trackers, global callouts, and template parts.

query CommonData {
  menus {
    nodes {
      locations
      slug
      name
      menuItems {
        nodes {
          label
          title
          url
          parentId
        }
      }
    }
  }
  templateParts {
    siteFooter {
      contentBlocks
    }
  }
}

The result is available to views/_app.tsx as props and anywhere in React through useAppData().

import { ContentBlocks } from "eddev/blocks"
import { useAppData } from "eddev/hooks"

export function Footer() {
  const footer = useAppData((data) => data.templateParts?.siteFooter)

  return <ContentBlocks blocks={footer?.contentBlocks} />
}

App data is loaded with the initial route payload and reused during normal client-side navigation. Do not put per-page content in _app.graphql; use a paired view query instead.

For the layout side of _app.tsx, see _app.tsx Layout.