访问从 Gatsby 静态查询导出的 JSON 块 [英] Access JSON chunk exported from Gatsby Static Query

问题描述

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

I have a React Component in a Gatsby app that is using the useStaticQuery hook to pull in data from the GraphQL layer. This component gets used in my application, but it also gets used as part of a JavaScript embed/widget that is created in a separate Webpack configuration.

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

I don't want the widget to depend on Gatsby, so I've shimmed the relevant bits of Gatsby, but I still need to pass in data to the shim I've created for useStaticQuery. I found that my Gatsby app is generating a file at public/static/d/2250905522.json that contains a perfect representation of the query data, and I'd like to use it like so:

// 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 works, but I haven't figured out where this is coming from or how to determine the file name in a way that is deterministic/stable. How is Gatsby determining this file name, and what internals might I use to do the same?

我发现 此例程 似乎使用 staticQueryComponent.hash 来确定数字.staticQueryComponent 正在从 store.getState() 解构，其中 store 与 Redux 相关联，但我仍然不确定散列在哪里尚未确定.

I found this routine in the Gatsby codebase that appears to be using staticQueryComponent.hash to determine the number. staticQueryComponent is being destructured from store.getState() where store is associated with Redux, but I'm still not sure where the hash is being determined yet.

编辑 2:找到 在此处的文档中再次提到这一点.听起来 hash 是查询本身的哈希值，因此如果查询更改(这很可能)，这将随着时间的推移而更改，因此我仍在寻找用于计算哈希值的例程.

Edit 2: Found another mention of this in the documentation here. It sounds like hash is a hash of the query itself, so this will change over time if the query changes (which is likely), so I'm still looking for the routine used to compute the hash.

推荐答案

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

Gatsby is using murmurhash with a seed of "abc" to calculate the hash of the full text of the query (including whitespace). This occurs in babel-plugin-remove-graphql-queries.

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

Since the reused components are isolated from Gatsby, the graphql tagged template literal can be shimmed in order to get the original query for hashing:

// 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，它可以类似地填充以从磁盘检索缓存的查询.

This results in the query hash being passed into useStaticQuery, which can be shimmed similarly to retrieve the cached query from disk.

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

Also worth noting, newer versions of Gatsby store the StaticQuery result data in public/page-data/sq/d/[query hash].json.

如果您想做类似的事情，我已经写了一篇关于这个过程的细节和我在这里得到的解决方案.

If you're looking to do something similar, I've written up a much longer blog post about the details of this process and the solution I arrived at here.

这篇关于访问从 Gatsby 静态查询导出的 JSON 块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！