Question

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

我不希望窗口小部件依赖于Gatsby，因此我对Gatsby的相关部分进行了填充，但是我仍然需要将数据传递给为useStaticQuery创建的垫片。我发现我的盖茨比应用程序正在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如何确定此文件名？我可能会使用哪些内部结构来做到这一点？

编辑：我在盖茨比代码库中发现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查询的变化，应将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正在使用murmurhash和种子"abc"来计算查询全文（包括空格）的哈希值。这发生在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"

const GATSBY_HASH_SEED = "abc"

function hashQuery(query) {
  return murmurhash(query, GATSBY_HASH_SEED).toString()
}

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

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

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

2 个答案: