Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not getting any data back in production? #8

Open
Twoy519 opened this issue Jan 29, 2021 · 1 comment
Open

Not getting any data back in production? #8

Twoy519 opened this issue Jan 29, 2021 · 1 comment

Comments

@Twoy519
Copy link

Twoy519 commented Jan 29, 2021

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?

@kmcaloon
Copy link
Owner

Hey @Twoy519 sorry I never got back to you on this. Since starting to build this out there have been many life and work changes, and honestly I haven't been too involved in the Gatsby ecosystem as I was. I'm sure you have moved on by now but didn't want to leave this hanging. Maybe some time soon I can revisit this plugin.

Also, hope you've been progressing and are enjoying your web dev journey 💪

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants