useGlobal

useGlobal is a core functionality that provides global data to anywhere in the website.

Usage

Our website often require specific data to be available on every page, but that shouldn't be included in the query every time the user navigates. This hook (and it's init function) allow us to query data once and store it locally.

Basic usage

Before the hook can be used we need to specify what data should be available. Notice how we have access to the locale, which is used to update the data when the language changes.

// Example inside of _app.js
initUseGlobal(
  (locale) => gql`{
    content_block(filter: { language: "${locale}" }) {
      nid
      title
      description
      cta
    }
  }`
);
Copy

The result from that call is automatically provided to all components that use the hook through context:

function Header() {
  const global = useGlobal();
  console.log('global', global); // { content_block: { nid, title, description, cta } }
  ...
}
Copy

Note: Only a single GraphQL call can be added, but inside of there you're free to add multiple keys