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

问题描述

我在使用 useStaticQuery的Gatsby应用程序中有一个React组件挂钩可从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?

我发现

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.

找到此处的文档中的另一提要.听起来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.

推荐答案

盖茨比正在使用值)可计算查询全文(包括空格)的哈希值.这发生在 babel-plugin-remove-graphql查询.

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"

const GATSBY_HASH_SEED = "abc"

function hashQuery(query) {
  return murmurhash(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.

如果您想做类似的事情，我写了一篇关于

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屋！