kmcaloon / gatsby-plugin-groq Goto Github PK
View Code? Open in Web Editor NEWGatsby plugin for using GROQ in place of GraphQL
License: MIT License
Gatsby plugin for using GROQ in place of GraphQL
License: MIT License
Hi! Hey this doesn't seem to be a very google-able plugin so thought I'd ask here about how to debug. I am using Sanity as my CMS.
I'm getting data back when I'm on localhost but when I deploy on netlify I'm not getting any data back on the production site?
I'm pretty new to web dev in general so don't know the right things to look for to debug this and was just looking for general advice?
gatsby-config.js
{
resolve: `gatsby-plugin-groq`,
options: {
referenceMatcher: 'id',
autoRefs: false,
},
},
I'm using static queries on pages that are built via createPages
in gatsby-node.js
. So for example I have just a simple "site directory" list with like the standard "about", "contact" etc. pages. I'm then querying Sanity for the content to put on the pages.
So gatsby-node.js
:
async function turnPagesIntoPages({ graphql, actions }) {
// 1. get template for page.
const pageTemplate = path.resolve('./src/templates/Page.js');
// 2. query all pages
const { data } = await graphql(`
query {
pages: allSanityPage {
nodes {
name
slug {
current
}
}
}
}
`);
// 3. Loop over each page and create a page for it
data.pages.nodes.forEach((page) => {
actions.createPage({
path: `${page.slug.current}`,
component: pageTemplate,
context: {
name: page.name,
},
});
});
}
Then the Page.js
Component:
...
import { useGroqQuery } from 'gatsby-plugin-groq';
export default function Page({ data }) {
const pages = useGroqQuery(`
*[_type == "page"]
`);
console.log({ pages });
const page = pages.filter((i) => i.slug.current === data.page.slug.current);
return (
<div>
{page[0]?.body ? (
<PortableText blocks={page[0].body} serializers={serializers} />
) : (
<p>Page coming soon 😃</p>
)}
</div>
);
}
So when I see that console.log in my netlify its empty, but this works on localhost.
As I said I'm really new to this so lmk what else I can provide to help debug?
Got the following stack trace when running yarn start
on a sanity/gatsby project
gatsby_1 | Error: Cannot find module 'gatsby-cli/lib/reporter'
gatsby_1 | Require stack:
gatsby_1 | - /code/web/plugins/gatsby-plugin-groq/gatsby-node.js
gatsby_1 | - /code/web/node_modules/gatsby/dist/bootstrap/resolve-module-exports.js
gatsby_1 | - /code/web/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
gatsby_1 | - /code/web/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
gatsby_1 | - /code/web/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
gatsby_1 | - /code/web/node_modules/gatsby/dist/bootstrap/index.js
gatsby_1 | - /code/web/node_modules/gatsby/dist/commands/develop.js
gatsby_1 | - /code/web/node_modules/gatsby/node_modules/gatsby-cli/lib/create-cli.js
gatsby_1 | - /code/web/node_modules/gatsby/node_modules/gatsby-cli/lib/index.js
gatsby_1 | - /code/web/node_modules/gatsby/dist/bin/gatsby.js
Hi, this doesn't work in latest gatsby can you put a disclaimer at the top of the readme that its not maintained? Thanks!
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"],
},
},
},
];
When I try yarn develop
with my index file named index.tsx
, I get this error:
warn Error parsing file: /Users/wvgg/projects/franklyn/frontent.groq/src/pages/index.tsx
Works fine if I rename to index.jsx
I had to abandon using this plugin as I'm in a bit of a hurry, but my gawd, I was able to do in 20 lines of groq what took 70 in graphql… what a disaster of a spec…
Hi there,
It me again. I happened to be trying out gatsby cloud to check out the sanity live preview and noticed that the build had an error related to this plugin.
"gatsby-plugin-groq" threw an error while running the resolvableExtensions lifecycle: ENOENT: no such file or directory, mkdir 'undefined/public/static/groq' 26 | fs.rmdirSync( GROQ_DIR, { recursive: true } ); 27 | } > 28 | fs.mkdirSync( GROQ_DIR ); | ^ 29 | 30 | // Cache fragments. 31 | const fragmentsDir = !! plugin.fragmentsDir ? path.join( ROOT, plugin.fragmentsDir ) : null;
Just thought I would let you know.
Got this error on a build randomly. Works noramlly.
2:11:16 PM: error "gatsby-plugin-groq" threw an error while running the resolvableExtensions lifecycle:
2:11:16 PM: ENOTEMPTY: directory not empty, rmdir '/opt/build/repo/web/public/static/groq'
2:11:16 PM: 23 |
2:11:16 PM: 24 | if( !! fs.existsSync( GROQ_DIR ) ) {
2:11:16 PM: > 25 | fs.rmdirSync( GROQ_DIR, { recursive: true } );
2:11:16 PM: | ^
2:11:16 PM: 26 | }
2:11:16 PM: 27 | fs.mkdirSync( GROQ_DIR );
2:11:16 PM: 28 |
2:11:16 PM:
2:11:16 PM:
2:11:16 PM: Error: ENOTEMPTY: directory not empty, rmdir '/opt/build/repo/web/public/stati c/groq
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.