Где разместить контекст провайдера в Гэтсби?

Question

Мне нужно запускать некоторые функции (например, Office UI Fabric React initializeIcons()) и вызов AXIOS (например, получить зарегистрированного пользователя с помощью Context API) только при первом обращении к сайту.затем сохраните полученные значения в контексте React и сделайте его доступным для всего приложения.

Гэтсби оборачивает содержимое моих страниц в макет , например:

const IndexPage = () =>
<Layout>
   Body of Index Page...
</Layout>

const AnotherPage = () =>    
<Layout>
   Body of Another Page...
</Layout>

с Макет выглядит так:

const Layout = ({ children }) =>
<>
    <Header /> 
    <main>{children}</main>
    <Footer />
</>

Я знаю, где я могу НЕ поставить свой контекст:

• по страницам (или оно будет выполняться при каждом обращении к странице, а также недоступно для других страниц):

  const IndexPage = () =>
  <MyContextProvider>
      <Layout>
         Context Available here
      </Layout>
  </MyContextProvider>
  

  const AnotherPage = () =>    
  <Layout>
      Context NOT available here
  </Layout>
  

• в макете (или он будет выполняться каждый раз):

  const Layout = ({ children }) =>
  <MyContextProvider>
      <Header /> 
      <main>{children}</main>
      <Footer />
  </MyContextProvider>
  

Полагаю, мне нужен корневой <app> объект для окружениямой провайдер контекста, но как можно добиться этого с помощью Gatsby?

Где мне разместить провайдера контекста?

Answer 1

Вы определяете корневой макет.В отличие от обычного макета, здесь не определены «видимые» элементы страницы, но есть скрытые элементы, которые вам нужны на каждой странице, такие как ContextProviders, React Helmet, темы и т. Д .:

RootLayout.jsx:

export default function RootLayout({ children }) {
  return (
    <>
      <Helmet />
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <ContextProvider>
            {children}
          </ContextProvider>
        </ThemeProvider>
    </>
  );
}

Гэтсби неявно вызывает этот корневой макет через gatsby-browser.js и gatsby-ssr.js и применяет его к каждой из ваших страниц.Эти две идентичные строки кода - все, что вам нужно, чтобы Гэтсби справился с остальными.

gatsby-browser.js:

export const wrapRootElement = ({ element }) => <RootLayout>{element}</RootLayout>;

gatsby-ssr.js:

export const wrapRootElement = ({ element }) => <RootLayout>{element}</RootLayout>;

Сводка:

• Ваш провайдер контекста помещается в корневой макет.

Ссылки:

• Я задавал похожие вопросы здесь и здесь .Код, который я предоставил в этом ответе, является решением вашего и моего вопроса.Это хорошая практика написания кода, адаптированная из таких сред, как React Redux, чтобы обернуть все ваше приложение с помощью провайдера контекста, если вашей информации нужна вся эта информация.
• В блоге @Lionel T упоминается.

Answer 2

Для полноты API Gatsby (через gatsby-browser.js) позволяет запускать функцию только один раз :

onClientEntry

export const onClientEntry = () => {
    console.log("Browser started!")
    // Put here run-only-once functions 
}

onInitialClientRender

export const onInitialClientRender = () => {
    console.log("First rendering completed!")
    // Put here run-only-once functions which need rendered output
}