访问从 Gatsby 静态查询导出的 JSON 块

Question

我在 Gatsby 应用程序中有一个 React 组件，它使用 useStaticQuery 挂钩从 GraphQL 层提取数据。这个组件在我的应用程序中使用，但它也被用作在单独的 Webpack 配置中创建的 JavaScript 嵌入/小部件的一部分。

我不希望小部件依赖于 Gatsby，因此我已经填充了 Gatsby 的相关位，但我仍然需要将数据传递给我为 useStaticQuery 创建的 shim。我发现我的 Gatsby 应用程序正在 public/static/d/2250905522.json 生成一个文件，其中包含查询数据的完美表示，我想像这样使用它：

// This file gets substituted when importing from `gatsby`

import queryResult from "../public/static/d/2250905522.json"

export const useStaticQuery = () => queryResult.data

export const graphql = () => {}

这可行，但我还没有弄清楚这是从哪里来的，或者如何以确定性/稳定的方式确定文件名。 Gatsby 是如何确定这个文件名的，我可以使用哪些内部结构来做同样的事情？

编辑：我在 Gatsby 代码库中发现 this routine 似乎使用 staticQueryComponent.hash 来确定数字。 staticQueryComponent 正在从 store.getState() 解构，其中 store 与 Redux 相关联，但我仍然不确定哈希在哪里确定。

编辑 2：找到 another mention of this in the documentation here。听起来hash 是查询本身的哈希，所以如果查询更改（很可能），这会随着时间而改变，所以我仍在寻找用于计算哈希的例程。

Answer 1

由于 babel-plugin-remove-graphql-queries 的变化，coreyward 的（真棒）答案应该更新为：

const { stripIgnoredCharacters } = require('graphql/utilities/stripIgnoredCharacters');
const murmurModule = require('babel-plugin-remove-graphql-queries/murmur');
const murmurhash = typeof murmurModule === 'function' ? murmurModule : murmurModule.murmurhash;

const GATSBY_HASH_SEED = 'abc';

function hashQuery(query) {
  const result = murmurhash(stripIgnoredCharacters(query), GATSBY_HASH_SEED).toString();
  return result;
}

module.exports = hashQuery;

变化如下：

• 修复 murmurhash 的导入方式。感谢 github 用户 veloce，请参阅：https://github.com/birkir/gatsby-source-graphql-universal/pull/16/files
• 改为使用 stripIgnoredCharacters 以匹配 gatsby 内部散列查询的更新方式，首先去除空格和注释行以提高效率。

Answer 2

Gatsby 使用带有 "abc" 种子的 murmurhash 来计算查询全文（包括空格）的哈希值。这发生在babel-plugin-remove-graphql-queries。

由于重用的组件与 Gatsby 隔离，graphql 标记的模板文字可以被填充以获得原始查询以进行散列：

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      gatsby: path.resolve(__dirname, "gatsby-shim.js"),
    },
  },
}

// gatsby-shim.js
import { murmurhash } from "babel-plugin-remove-graphql-queries/murmur"
import {
  stripIgnoredCharacters,
} from "graphql/utilities/stripIgnoredCharacters"

const GATSBY_HASH_SEED = "abc"

const hashQuery = (query) =>
  murmurhash(
    stripIgnoredCharacters(query),
    GATSBY_HASH_SEED
  ).toString()

export const graphql = query => hashQuery(query.raw[0])

这导致查询哈希被传递到useStaticQuery，可以类似地填充它以从磁盘检索缓存的查询。

另外值得注意的是，较新版本的 Gatsby 将 StaticQuery 结果数据存储在public/page-data/sq/d/[query hash].json。

如果您想做类似的事情，我已经写了一篇关于the details of this process and the solution I arrived at here 的更长的博文。