Why does a production app query YOUR_APP.prismic.io/graphql on every page load?

[Floriferous]

Hi guys,

This is a beginner question, as I'm starting to wrap my head around how this plugin, Gatsby, and Prismic work together.

I noticed on our production app that for each page you visit a large query is made to YOUR_APP.prismic.io, via the graphql API.

My shallow understanding of Gatsby, is that it performs all of the data querying at build-time, and then you simply render a static site. However this appears not to be the case, since a 130kB graphql query happens on each page load.

Am I misunderstanding something? Or is this how it's supposed to work?

[ohlr]

Do you have previews enabled on your production build?

I would recommend to use previews on a staging build and disable them for production. Moreover you can set omitPrismicScript=true, to stop loading the preview script

[lucashfreitas]

Related #17

[Floriferous]

I believe I have properly disabled previews, but it doesn't seem to remove the queries to prismic.io.

Am I missing something?

Here's my gatsby-config:

    {
      resolve: '@prismicio/gatsby-source-prismic-graphql',
      options: {
        repositoryName: process.env.PRISMIC_REPO,
        accessToken: process.env.PRISMIC_API_KEY,
        langs: ['fr-ch'],
        defaultLang: 'fr-ch',
        shortenUrlLangs: true,
        // path: '/preview',
        previews: false,
        omitPrismicScript: true,
        pages: [
          {
            type: 'Page',
            match: '/:lang/:uid',
            component: require.resolve('./src/templates/page.jsx'),
          },
          {
            type: 'Post',
            match: '/:lang/blog/:uid',
            component: require.resolve('./src/templates/post.jsx'),
          },
        ],
      },
    },

EDIT: I did check, the prismic.min.js file is not included, but that has no impact on the queries.

[lucashfreitas]

Hello @Floriferous ,

Disabling the preview doesn't prevent the plugin from loading the scripts on your page. To do that you can add this extra option to your configuration: omitPrismicScript: true.

Important to remember that if you want to use the preview feature you will need the script.

There is an open discussion around that in #17.

[Floriferous]

As you can see in my config above, I already disabled that :)

[ohlr]

Could it be images that you load dynamically? If you don't use imageSharp you only get a image url at build time.. The images are then dynamically loaded from prismics CDN

[Floriferous]

We're using a mix of normal images and imageSharp, but they're all coming from page queriey. I'm now seeing an issue specifically with this prismic.io/graphql query:

"message":"Query does not pass validation. Violations:\n\nCannot query field 'imageSharp' on type 'PageBodyHeroPrimary'. Did you mean 'image' or 'image_layout'?

It looks like it's trying to use our page query and send it directly to prismic, instead of querying the gatsby site, where those sharp images are properly defined and ready to use.

I am in fact getting the sharp images on my website anyways, so this would mean that this prismic query is not even doing anything after the data returns, but just makes an extra, unnecessary query?

[ohlr]

If you're using imageSharp make sure to also query the normal image.

{
 image
 imageSharp{
...
}
}

[Floriferous]

Yeah I always query both. But it's normal that since my app somehow makes a request to prismic's graphQL api, that prismic would crash if I ask it a sharp image, regardless if I ask for the normal image too right? I believe graphql enforces that your query is perfect before returning a result.

So this comes back to the original question, why is this prismic.io/graphql query even happening..?

[ohlr]

Hard to say... can you provide a minimal example?

[Floriferous]

Here it is: https://tinyurl.com/yabv47tk

If you look at the network tab, 2 queries are made to prismic. One passes (though I don't know what it is doing), and the other fails because prismic can't interpret the imageSharp field in the query.

[aikodeio]

Hello! I have the same conflict. Did you manage to solve this?

[lucashfreitas]

@Floriferous ,

I believe the issue is because the Wrap Page component is being injected not only if you have preview configuration enabled, but also if you have any page being created by the plugin.

Would you be able to remove the pages options from the plugin configuration

pages: [ { type: 'Page', match: '/:lang/:uid', component: require.resolve('./src/templates/page.jsx'), }, { type: 'Post', match: '/:lang/blog/:uid', component: require.resolve('./src/templates/post.jsx'), },

And do a quick test if the request will stop? If that works I can figure out a fix for that.

Unfortunately a bit busy at the moment and not able to try to reproduce it!

[Floriferous]

@lucashfreitas I'm not sure I understand what you mean: all the pages on our site are generated by this Prismic plugin, and on each one of them the prismic API is called. So if I go on a page that isn't generated by this plugin (like our 404 page, from the filesystem), it will not call the prismic API.

So if I comment out the pages key, and deploy the website, and go to our 404 page, well.. it still doesn't call the prismic API, which is normal I believe.