Queries performed and cached properly, but not being exposed to components

[hdoro]

Hey there, Kevin! 👋

First of all, let me reinforce the gratitude for this. I'm about to go insane managing a bunch of needlessly complex GraphQL queries and React methods to work with sophisticated data structures that GROQ has no problems with, and having this plugin at hand can be a life-saver.

That said, I've managed to get querying right, but the results are never exposed to the pages and components. Here are two examples:

// First, components w/ static query
import React from 'react';
import { useGroqQuery } from 'gatsby-plugin-groq';

export default () => {
  const test = useGroqQuery(`
    *[0..2]
  `);
  console.log({ test }); // undefined
  return <>{JSON.stringify(test)}</>;
};

// Second, standalone pages (src/pages/test.js)
import React from 'react';

export default (props) => {
  console.log(props); // no props.data nor props.pageContext.data
  return <>{JSON.stringify(props)}</>;
};

export const groqQuery = `
  *[0..2]
`;

I've also tested this with programmatically created pages (createPage in gatsby-node), the result is the same: queries are cached and properly fetched, but they don't show up in the front-end.

How can I help debugging this?

Here are my enabled plugins in gatsby-config:

[
  {
    resolve: "gatsby-source-filesystem",
    options: {
      name: "content",
      path: `${__dirname}/docs-structure`,
    },
  },
  {
    resolve: "gatsby-source-filesystem",
    options: {
      name: "tutorials",
      path: `${__dirname}/tutorials`,
    },
  },
  {
    resolve: "gatsby-source-filesystem",
    options: {
      name: "resources",
      path: `${__dirname}/resources`,
    },
  },
  {
    resolve: `gatsby-plugin-mdx`,
    options: {
      extensions: [`.md`, `.mdx`],
      gatsbyRemarkPlugins: [
        "gatsby-remark-autolink-headers",
        {
          resolve: "gatsby-remark-external-links",
          options: {
            target: "_blank",
          },
        },
      ],
    },
  },
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        "gatsby-remark-autolink-headers",
        {
          resolve: "gatsby-remark-external-links",
          options: {
            target: "_blank",
          },
        },
      ],
    },
  },
  {
    resolve: `gatsby-plugin-sitemap`,
    options: {},
  },
  "gatsby-plugin-preact",
  "gatsby-plugin-react-helmet",
  {
    resolve: "gatsby-source-sanity",
    options: {
      projectId: "e3vd3ukt",
      dataset: "production",
    },
  },
  {
    resolve: "gatsby-plugin-groq",
    options: {
      // referenceMatcher: '_id',
      autoRefs: true,
    },
  },
  {
    resolve: "gatsby-plugin-manifest",
    options: {
      legacy: false,
    },
  },
  {
    resolve: "gatsby-plugin-google-tagmanager",
    options: {
      id: "GTM-TPMQ838",

      // Include GTM in development.
      // Defaults to false meaning GTM will only be loaded in production.
      includeInDevelopment: false,
    },
  },
  "gatsby-plugin-less",
  {
    resolve: `gatsby-plugin-netlify`,
    options: {
      // Reset the default rule of preventing framing, as we need it for CMS content preview
      headers: {
        "/preview": ["X-Frame-Options: ALLOW"],
      },
    },
  },
];

[kmcaloon]

Hey @hcavalieri, glad you're using it! So I guess first things first, you said the actual queries are being cached? Can you paste their contents here? They should be in your .cache/groq directory if you're in development.

[kmcaloon]

And also thanks for the appreciation, I'm humbled that you're giving it a shot for your project. I'm really hoping this plugin can be useful to people.

[hdoro]

Here's the one for the page query:

info [groq] Re-processing groq queries...
info [groq] Caching page query: 2324459059

// 2324459059.json
{"unprocessed":"`\r\n  *[0..2]\r\n`"}
// and there's also `804971903.json`, with the same value.

When I added the useGroqQuery to the same page file, it got me 4079246584.json, which has valid data:

[{"internalComponentName":"ComponentDev404Page","path":"/dev-404-page/","component":"C:/dev/clients/ambassador/getambassador.io/.cache/dev-404-page.js","componentChunkName":"component---cache-dev-404-page-js","isCreatedByStatefulCreatePages":true,"context":{},"pluginCreator___NODE":"d48d1c52-fe48-53cb-8f08-aa4b47dde5a5","pluginCreatorId":"d48d1c52-fe48-53cb-8f08-aa4b47dde5a5","componentPath":"C:/dev/clients/ambassador/getambassador.io/.cache/dev-404-page.js","id":"SitePage /dev-404-page/","parent":null,"children":[],"internal":{"type":"SitePage","contentDigest":"d06d2b16ca63a875cf3941078cfe1da5","description":"d48d1c52-fe48-53cb-8f08-aa4b47dde5a5","counter":2695,"owner":"internal-data-bridge"},"__gatsby_resolved":{"path":"/dev-404-page/"}},{"resolve":"C:/dev/clients/ambassador/getambassador.io/node_modules/gatsby/dist/internal-plugins/dev-404-page","id":"d48d1c52-fe48-53cb-8f08-aa4b47dde5a5","name":"dev-404-page","version":"1.0.0","pluginOptions":{"plugins":[]},"nodeAPIs":["createPagesStatefully"],"browserAPIs":[],"ssrAPIs":[],"pluginFilepath":"C:/dev/clients/ambassador/getambassador.io/node_modules/gatsby/dist/internal-plugins/dev-404-page","packageJson":{"name":"dev-404-page","description":"Internal plugin to add a 404 page in development with helpful information","version":"1.0.0","main":"index.js","author":"Kyle Mathews <mathews.kyle@gmail.com>","license":"MIT","dependencies":[],"devDependencies":[],"peerDependencies":[],"optionalDependecies":[],"bundledDependecies":[]},"parent":null,"children":[],"internal":{"contentDigest":"d867eb9c127b62dfde23da4ceb542fa5","type":"SitePlugin","counter":2,"owner":"internal-data-bridge"}},{"resolve":"C:/dev/clients/ambassador/getambassador.io/node_modules/gatsby/dist/internal-plugins/load-babel-config","id":"1fc32581-893a-55e8-8927-bcd667e2b700","name":"load-babel-config","version":"1.0.0","pluginOptions":{"plugins":[]},"nodeAPIs":["onPreBootstrap"],"browserAPIs":[],"ssrAPIs":[],"pluginFilepath":"C:/dev/clients/ambassador/getambassador.io/node_modules/gatsby/dist/internal-plugins/load-babel-config","packageJson":{"name":"load-babel-config","description":"Internal plugin that handles loading Babel configs","version":"1.0.0","main":"index.js","author":"Kyle Mathews <mathews.kyle@gmail.com>","license":"MIT","dependencies":[],"devDependencies":[],"peerDependencies":[],"optionalDependecies":[],"bundledDependecies":[]},"parent":null,"children":[],"internal":{"contentDigest":"615cd6d7e9961d07cbec1c70fa5538a7","type":"SitePlugin","counter":3,"owner":"internal-data-bridge"}}]

And the weird thing is that the page query wasn't working... until I added the static query to the same file, now it works. The static query doesn't, however 🤔

And for the usefulness of this plugin, I have no doubt it's a given once we can get the rough edges sorted out :D Let me know how I can further help with code

[kmcaloon]

Hmm, I've done my fair share of trying to break everything and I've never experienced what you're running into. Before digging in further, there's no way I can check out the repo is there?

[kmcaloon]

One more question, are you setting any context properties when creating the pages? If so can I see what it looks like?

[hdoro]

Sorry for the wait, Kevin! So I've started a Gatsby site from scratch to test it, and this is still not working. The difference is that now this shows up in the console:

Error: "Cannot find module './1374134698.json'"
    webpackContextResolve .json$:14
    webpackContext .json$:9
    useGroqQuery index.js:32
    PostPage PostPage.tsx:5
    Preact 63
    js app.js:94
index.js:36

I believe this might have to do with how Windows handles paths... what OS are you developing this on?

[kmcaloon]

Hey no worries, we can also follow up on Slack if you want. So I think I spotted the issue but I'm on macOS and don't have time to test a windows environment right at this moment. Right now the fixes are up on on the fix/windows-path branch. If you want you could try it out I'm pretty sure it works, otherwise I will need to find time probably Friday.

[hdoro]

Thanks for the quick action! useGroqQuery is now working and that console error is gone, but page-level queries are still not working... They're only parsed when I re-run the process, changing them when gatsby develop is running is not triggering the plugin, and here's what I get in the cache:

{"unprocessed":"`\r\n  *[_type == 'blogPost']|order(meta.publishedAt desc)[$start..$paginationSize]\r\n`"}

This might be because I'm using a local plugin? Anyhow, if this plugin is working for you, Kevin, there's no need to keep troubleshooting it for me! Apparently there aren't many Gatsby developers using Windows (which also explains how slow it is in my machine hahah), so your potential gain here is limited. Plus, I'm not paying you for this, so this free work comes at a cost!

That said, if you want we can hop on a call to debug it if your "solver instinct" is kicking in 😆

[kmcaloon]

Lol it's definitely kicking in. And I didn't build this plugin just for me so I definitely would like to give anyone who is using it a smooth experience. I'll keep digging. I know I asked before, but there is no way I can get access to a repo that replicates the problem right?