Gatsby中绕过GraphQL Context，从createPages API传数据至React组件

嘿，我正好之前也遇到过类似的需求——不想靠GraphQL的context来给页面组件传额外数据，下面几个方案亲测好用，你可以根据自己的场景选：

1. 用包装组件直接传递Props #

这个方法适合你在gatsby-node.js里创建页面时，已经知道每个页面需要的固定参数（比如预设的搜索查询词）。核心思路是给目标页面组件套一层包装器，把参数直接作为Props传进去，完全绕开GraphQL查询。

步骤示例： #

首先在gatsby-node.js里创建页面时，指定包装组件作为页面入口，并把需要的参数放在context里（这里的context是给包装组件用的，不是给GraphQL query）：

exports.createPages = async ({ actions }) => {
  const { createPage } = actions;

  // 假设你有多个页面，每个对应不同的搜索参数
  const pageConfigs = [
    { path: "/my-page", searchQuery: "gatsby 组件传参" },
    { path: "/another-page", searchQuery: "react ajax 技巧" },
  ];

  pageConfigs.forEach(config => {
    createPage({
      path: config.path,
      // 指定包装组件的路径
      component: require.resolve("./src/components/PageWrapper.js"),
      context: {
        // 传递需要的参数
        searchQuery: config.searchQuery,
        // 告诉包装器实际要渲染的页面组件路径
        targetComponent: require.resolve("./src/pages/MyPage.js"),
      },
    });
  });
};

然后写包装组件PageWrapper.js，动态引入目标组件并传递Props：

import React, { lazy, Suspense } from "react";

const PageWrapper = ({ pageContext }) => {
  // 动态加载目标页面组件
  const TargetComponent = lazy(() => import(pageContext.targetComponent));

  return (
    <Suspense fallback={<div>页面加载中...</div>}>
      {/* 直接把参数作为Props传给目标组件 */}
      <TargetComponent searchQuery={pageContext.searchQuery} />
    </Suspense>
  );
};

export default PageWrapper;

最后你的MyPage.js就能直接拿到searchQuery Props，不用写任何GraphQL：

import React, { useEffect, useState } from "react";

const MyPage = ({ searchQuery }) => {
  const [ajaxData, setAjaxData] = useState(null);

  useEffect(() => {
    // 直接用searchQuery做AJAX请求
    fetch(`https://your-api.com/search?q=${searchQuery}`)
      .then(res => res.json())
      .then(data => setAjaxData(data));
  }, [searchQuery]);

  return (
    <div>
      <h1>搜索参数：{searchQuery}</h1>
      {ajaxData && <pre>{JSON.stringify(ajaxData, null, 2)}</pre>}
    </div>
  );
};

export default MyPage;

2. 解析URL参数获取数据 #

如果你的搜索参数本来就跟URL绑定（比如/my-page?query=gatsby），那直接在组件里解析URL参数就好，完全不需要在gatsby-node.js里做额外配置。

代码示例： #

import { useLocation } from "@reach/router";
import React, { useEffect, useState } from "react";

const MyPage = () => {
  const location = useLocation();
  const [searchQuery, setSearchQuery] = useState("");
  const [ajaxData, setAjaxData] = useState(null);

  useEffect(() => {
    // 解析URL里的查询参数
    const params = new URLSearchParams(location.search);
    const query = params.get("query");
    
    if (query) {
      setSearchQuery(query);
      // 用解析到的参数发AJAX请求
      fetch(`https://your-api.com/search?q=${query}`)
        .then(res => res.json())
        .then(data => setAjaxData(data));
    }
  }, [location.search]);

  return (
    <div>
      <h1>当前搜索词：{searchQuery}</h1>
      {ajaxData && <div>请求结果：{JSON.stringify(ajaxData)}</div>}
    </div>
  );
};

export default MyPage;

这个方案特别适合参数需要动态变化的场景，比如用户手动修改URL里的参数，组件能自动响应更新。

3. 全局状态管理（React Context） #

如果你的数据需要在多个页面或组件之间共享，或者需要从外部异步加载后全局使用，可以用React Context API来管理全局状态，这样任何组件都能直接获取数据，不用层层传递Props。

React Context示例： #

首先创建一个全局Context：

// src/context/GlobalDataContext.js
import React, { createContext, useState, useContext, useEffect } from "react";

const GlobalDataContext = createContext();

export const GlobalDataProvider = ({ children }) => {
  const [globalParams, setGlobalParams] = useState({});

  // 这里可以初始化全局数据，比如从本地存储或外部接口获取
  useEffect(() => {
    // 示例：从localStorage读取保存的搜索参数
    const savedQuery = localStorage.getItem("lastSearchQuery");
    if (savedQuery) {
      setGlobalParams({ searchQuery: savedQuery });
    }
  }, []);

  return (
    <GlobalDataContext.Provider value={{ globalParams, setGlobalParams }}>
      {children}
    </GlobalDataContext.Provider>
  );
};

// 自定义Hook，方便组件调用
export const useGlobalData = () => useContext(GlobalDataContext);

然后在gatsby-browser.js和gatsby-ssr.js里用这个Provider包裹根组件（确保服务端渲染和客户端渲染都能获取到全局状态）：

// gatsby-browser.js
import { GlobalDataProvider } from "./src/context/GlobalDataContext";

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

（gatsby-ssr.js里复制同样的代码即可）

最后在页面组件里使用：

import { useGlobalData } from "../context/GlobalDataContext";
import React, { useEffect, useState } from "react";

const MyPage = () => {
  const { globalParams } = useGlobalData();
  const [ajaxData, setAjaxData] = useState(null);

  useEffect(() => {
    if (globalParams.searchQuery) {
      fetch(`https://your-api.com/search?q=${globalParams.searchQuery}`)
        .then(res => res.json())
        .then(data => setAjaxData(data));
    }
  }, [globalParams.searchQuery]);

  return (
    <div>
      <h1>全局搜索参数：{globalParams.searchQuery}</h1>
      {ajaxData && <pre>{JSON.stringify(ajaxData, null, 2)}</pre>}
    </div>
  );
};

export default MyPage;

内容的提问来源于stack exchange，提问作者32423hjh32423