如何在Gatsby中访问模板组件中的上下文变量？

import React from "react";

const MyTemplateComponent = ({ pageContext }) => {
  const { myVariable } = pageContext;

  return (
    <div>
      <h1>访问上下文变量示例</h1>
      <p>上下文变量的值是: {myVariable}</p>
    </div>
  );
};

export default MyTemplateComponent;

import React from "react";
import { graphql } from "gatsby";

const MyPageComponent = ({ data }) => {
  const { myVariable } = data.pageContext;

  return (
    <div>
      <h1>访问上下文变量示例</h1>
      <p>上下文变量的值是: {myVariable}</p>
    </div>
  );
};

export const query = graphql`
  query($myVariable: String) {
    pageContext {
      myVariable
    }
  }
`;

export default MyPageComponent;