Global Data

The /views/_app.graphql query file should be populated with a query which fetches any data needed globally throughout your application — especially things like menus and footer config, as well as any support data or settings.

The result of this query will be available immediately on page load via the useAppData() hook. The query will not be re-executed or updated, unless the user performs a hard refresh, or opens a link in a new tab.

query AppData {
  menu(id: "footer", idType: LOCATION) {
    menuItems {
      nodes {
        label
        uri
      }
    }
  }
}

By default, useAppData() will return the entire result, but can optionally pass in a callback parameter to select the data you need, for syntactic convenience.

import { useAppData } from "eddev/hooks"
import { Link } from "eddev/routing"
 
export function Footer() {
  const footerItems = useAppData((data) => data.menu?.menuItems)
 
  return <ul>
    {footerItems?.map((item, i) => (
      <li key={i}>
        <Link href={item.uri!}>
          {item.label}
        </Link>
      </li>
    ))}
  </ul>
}