0

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.

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 = () => {}

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?

Edit: 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.

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.

2 Answers 2

2

Due to changes in the babel-plugin-remove-graphql-queries, coreyward's (awesome) answer should be updated to:

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;

The changes are:

2

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.

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])

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

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.

1
  • Hi, is there any chance you can share what is in gatsby-shim.js? I am needing to do something very similar to what you have described to export a Nav component into a legacy site. I hope you don't mind but I am going to peek at your profile and ask you over email too. Jan 28, 2020 at 8:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.