Do fragments and imageSharp work with preview

[Jrousell]

Hi,

First off, just wanted to say thanks for this awesome project. I was using gatsby-source-prismic which was great, but switched to this for previews and am loving it so far.

So, I've got previews working, but have encountered 2 issues which could easily be my errors, so just wanted to check before I go much further ...

Fragments + Previews If I use a fragment in my page query (as below) it works fine in dev mode, but when I preview from prismic I've been getting a sporadic apollo error stating ...page not recognised. If I switch out the frgament and inline the graphql it works, so not sure if it's me or whether fragments don't play nicely with previews.

export const query = graphql`
  query pageTypeQuery($uid: String!) {
    page: prismic {
      ctPage(lang: "en-gb", uid: $uid) {
        ...page
      }
    }
  }
`;

imageSharp + Previews I've got imageSharp working nicely in dev, but when I tried previewing I was getting an imageSharp not found error. I fixed it in my component by switching to a normal <img> if the imageSharp entry wasn't available and now previews work. Again, could this be my code or doesn't imageSharp work with previews?

Thanks for any advice on the above.

[birkir]

imageSharp do not work in preview I am afraid, I have an idea on how to polyfill them, but for now they are not supported

[trickydisco78]

First of all thanks for the great work you've done with this plugin. It's very much appreciated!

I noticed we have fallback code in a component to deal with ImageSharp and provide an image url in preview but how do we get round the graphql fragment erroring on the prismic server? I get 500 errors with the query

Ah is that what you are saying. It's currently not supported in preview? Will the preview image still work if the graphql query doesn't work as the payload is coming from prismic? I get an error for this query as obviously childImageSharp isn't available on the server

    prismic {
      case_study(uid: $uid, lang: "en-gb") {
        text: intro_text
        title
        image
        largeDeviceImage: imageSharp {
          childImageSharp {
            fluid(maxWidth: 1280, maxHeight: 510, cropFocus: CENTER) {
              aspectRatio
              srcSet
              src
              sizes
            }
          }
        }```

[birkir]

Understood. Yes so the direct queries to prismic should already be stripped out https://github.com/birkir/gatsby-source-prismic-graphql/blob/master/packages/gatsby-source-prismic-graphql/src/components/WrapPage.tsx#L21-L33

What kind of error do you get?

[trickydisco78]

Hiya.. I get a 500 error on this query

Ah..I know i need to fix the fragments. I'll do that now

[trickydisco78]

I'm wondering if it's due to the aliasing?

[birkir]

Well.. these won't work directly in the Prismic GraphQL explorer. The plugin does some stripping away for you.

So, yeah, do you have the actual Gatsby error?

[trickydisco78]

I am getting this error when previewing from prismic. The screenshot is from the query coming from the page which i've opened in a new tab. I'm thinking the reason why it's not stripping it out is due to the aliasing?

[mad-gav]

It looks like the stripSharp function won't strip aliased queries as shown

singleAspectRatioImage: imageSharp { __typename }

We have a graphql query that requires 2 different aspect ratio. For this we've aliased to use 'singleAspectRatioImage' which is aliased to 'imageSharp

When previewing this page we get a graphql error in the network tab from prismic 'cann't query field 'imageSharp'

[mad-gav]

Looks like this change was merged in on the 19 Jun:

https://github.com/birkir/gatsby-source-prismic-graphql/pull/221

After checking against versions and realising i'm on 3.3 without this change. I made amendments locally to WrapPage.js and this does indeed work. Now need to look at major differences between 3.3 and 3.4

[mad-gav]

I feel this issue can be closed

[mad-gav]

I've realised i can't easily upgrade from 3.3 to 3.4 without a huge amount of work of getting around dependancy hell. What i've done is apply patch package to WrapPage.js to expand the regex to include various aliases

.value.match(/.+Sharp$/)

This covers usecases such as

imageSharp ChildImageSharp landscape_imageSharp full_width_imageSharp

that we have in our queries

and of course the change from remove() to delete this.parent.delete();