_app.tsx View

The views/_app.tsx view is a special kind of view. It's always rendered, as the wrapper around your entire frontend. It's usually where you'd put your header/footer and other global elements, as well as where you'll load global styles.

import { PageLoadIndicator } from "@components/generic/PageLoadIndicator"
import { AdminBar } from "eddev"
import { Header } from "@components/site/Header"
import { defineView } from "eddev/views"
import { fontFaceGlobalStyles, frontendGlobalStyles } from "@theme"
import { Footer } from "@components/site/Footer"

fontFaceGlobalStyles()
frontendGlobalStyles()

export default defineView("_app", ({ children }) => {
  return (
    <>
      <PageLoadIndicator />
      <AdminBar />
      <Header />
      {children}
      <Footer />
    </>
  )
})

App Query#

You can write an views/_app.graphql file, and the result will be available on every page, via the useAppData() hook. The result wont be passed in as props, so be sure to use the hook if you need to access it.

Note that the _app.graphql query only runs once — when the user first loads the page.

This is especially useful for things like menus, which are often used on every page, and should be accessible from anywhere on the first render of the page.