GraphQL error when using withPreview HOC

[hazem3500]

I get this error when using withPreview with StaticQuery component

"Syntax Error: Unexpected Name "undefined""

here is my component

import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
import { withPreview } from 'gatsby-source-prismic-graphql';
import Img from 'gatsby-image';

export const HOME_HERO_QUERY = graphql`
    query HOME_HERO_QUERY {
        prismic {
            section(lang: "en-us", uid: "home-hero") {
                body {
                    ... on PRISMIC_SectionBodyHome_hero {
                        primary {
                            cta {
                                ... on PRISMIC_Page {
                                    slug
                                }
                            }
                            cta_text
                            text
                            title
                            img_action_card
                            img_action_cardSharp {
                                childImageSharp {
                                    fluid(maxWidth: 400, maxHeight: 250) {
                                        ...GatsbyImageSharpFluid
                                    }
                                }
                            }
                            img_agenda_tile
                            img_agenda_tileSharp {
                                childImageSharp {
                                    fluid(maxWidth: 400, maxHeight: 250) {
                                        ...GatsbyImageSharpFluid
                                    }
                                }
                            }
                            img_project_card
                            img_project_cardSharp {
                                childImageSharp {
                                    fluid(maxWidth: 400, maxHeight: 250) {
                                        ...GatsbyImageSharpFluid
                                    }
                                }
                            }
                            img_notes_tile
                            img_notes_tileSharp {
                                childImageSharp {
                                    fluid(maxWidth: 400, maxHeight: 250) {
                                        ...GatsbyImageSharpFluid
                                    }
                                }
                            }
                            img_meeting_timer
                            img_meeting_timerSharp {
                                childImageSharp {
                                    fluid(maxWidth: 400, maxHeight: 250) {
                                        ...GatsbyImageSharpFluid
                                    }
                                }
                            }
                            img_meeting_table
                            img_meeting_tableSharp {
                                childImageSharp {
                                    fluid(maxWidth: 400, maxHeight: 250) {
                                        ...GatsbyImageSharpFluid
                                    }
                                }
                            }
                            img_meeting_card
                            img_meeting_cardSharp {
                                childImageSharp {
                                    fluid(maxWidth: 400, maxHeight: 250) {
                                        ...GatsbyImageSharpFluid
                                    }
                                }
                            }
                            img_laptop
                            img_laptopSharp {
                                childImageSharp {
                                    fluid(maxWidth: 400, maxHeight: 250) {
                                        ...GatsbyImageSharpFluid
                                    }
                                }
                            }
                            img_decisions_tile
                            img_decisions_tileSharp {
                                childImageSharp {
                                    fluid(maxWidth: 400, maxHeight: 250) {
                                        ...GatsbyImageSharpFluid
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
`;

const HomeHero = () => (
    <StaticQuery
        query={HOME_HERO_QUERY}
        render={withPreview(({ prismic: { section: { body } } }) => {
            const {
                cta,
                cta_text,
                title,
                img_action_cardSharp,
                img_agenda_tileSharp,
                img_project_cardSharp,
                img_notes_tileSharp,
                img_meeting_timerSharp,
                img_meeting_tableSharp,
                img_meeting_cardSharp,
                img_laptopSharp,
                img_decisions_tileSharp,
            } = body[0].primary;
            return (
                <div>
                    <p>{title[0].text}</p>
                    <p>{cta_text[0].text}</p>
                    <Img fluid={img_action_cardSharp.childImageSharp.fluid} />
                </div>
            );
        }, HOME_HERO_QUERY)}
    />
);

export default HomeHero;

[hazem3500]

Apparently the Access Token isn't passed to the WrapPage Component when using StaticQuery with WithPreview HOC

[paulKerckhove]

Hey @hazem3500, you don't need any accessToken for the production or the preview to use this plugging.

[hazem3500]

I thought the access token was the issue, then why am I getting "Syntax Error: Unexpected Name "undefined""?

[ecomonestop]

I'm facing the same error. Any resolution for this issue? Thanks!

[henrymyers]

Same problem here!

[henrymyers]

@hazem3500 @ecomonestop I just realized that (at least for pages) you need to export your query with the name query e.g.

export const query = graphql`
    query HOME_HERO_QUERY {
       ... 
    }
`;

This is caused by one of gatsby-source-prismic-graphql's dependencies https://github.com/birkir/gatsby-source-graphql-universal/blob/817d99dd28285b30c05c132405c47bf208656cd3/src/getRootQuery.js#L13