Giter Club home page Giter Club logo

gatsby-plugin-groq's Issues

Not getting any data back in production?

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?

Cannot find module 'gatsby-cli/lib/reporter'

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

Not maintained

Hi, this doesn't work in latest gatsby can you put a disclaimer at the top of the readme that its not maintained? Thanks!

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

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"],
      },
    },
  },
];

busted in Typescript?

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…

Error occurred when building on Gatsby Cloud

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.

Netlify build error

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.