fetchLinks / graphQuery with Shopify Integration Field

Developing with Prismic
1

Hey,

I'm trying to figure out if it's possible to access data within an integration field (Shopify in my case) using either fetchLinks or graphQuery. I've tried both out both (see examples below), but in both cases the only data returned to me for the integration field is the id. The custom type is called 'product', and the integration field is called 'artwork':

fetchLinks
fetchLinks: ['product.artwork']

graphQuery

graphQuery: `
 {
  product {
   ...productFields
  }
 }
`,

Based on what I've read in the docs I don't think this is possible, but I wanted to double check before I try another approach.

Thanks!

3

Hi @kieranstartup,

Thanks for reaching out; it seems to me that there is an error in the Graph query you are passing; I recommend you to try to test your question in the Rest API browser, such as what I have tried.

Here is an example query the I have constructed that query a document with UID that contains an interaction field (that fetches some Shopify products)call cheaply_products where the document UID is cheaply_doc

https://fdr-shopify.prismic.io/api/v2/documents/search?integrationFieldsRef=fdr-shopify%7E2b961c12-1626-45c2-b201-98a464d5bcfe&ref=YeWLPxIAACQAk6BJ&q=%5B%5Bat(my.cheaply.uid%2C+%22cheaply_doc%22)%5D%5D#format=json

My GraphQuery looks like this when decoded:

{
  cheaply {
    cheaply_products
  }
}

Does this example correspond to your query? I'm I getting your use case correctly?
Looking forward to your reply,
Fares

4

Hey @Fares,

Thanks for getting back to me so quickly, I appreciate it. I realised I forgot to mention possibly a key detail – I'm building the site out using the gatsby-source-prismic plugin, and I'm following the instructions for the fetchLinks / graphQuery code here: Gatsby Migration Guide: gatsby-source-prismic V3 to V4 - Prismic

Here's an excerpt of my gatsby-config.js file:

{
      resolve: "gatsby-source-prismic",
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        customTypesApiToken: process.env.PRISMIC_CUSTOM_TYPES_API_TOKEN,
        graphQuery: `
        {
          product {
            artwork
          }
        }
        `,
        linkResolver: require(`./src/components/link-resolver/linkResolver`)
          .linkResolver,
      },
    },

And my linkResolver looks like the following:

exports.linkResolver = (doc) => {
  // URL for a product type
  if (doc.type === "product") {
    console.log(doc);
    return `/${doc.data.artwork.handle}/`;
  }

  // Backup for all other types
  return `/${doc.uid}/`;
};

What I want to be able to do is take the Shopify product handle and set that as the generated uid for the product, rather than the Prismic Product uid, if that makes sense?

But currently when I console.log(doc) as above, the following data is returned, without any of the Shopify integration field data (which should be displayed underneath artwork on the last line:

{
  link_type: 'Document',
  id: 'b48fd90d-89f5-5d9c-930c-456ce2e7e7ad',
  uid: 'hockney-test-artwork',
  type: 'product',
  tags: [],
  lang: 'en-gb',
  url: undefined,
  slug: 'hockney-test-artwork',
  data: { artwork: '86ff8e84-aac5-543a-b005-45f6285c43f6' }
}

It's very possible that what I want to do isn't possible, but I just wanted to see if it was.

Let me know if you need any other details / clarification.

Thanks!

7

Hi @kieranstartup
Sorry for the delay, I'm checking with our Gatsby team to check if we have any limitations in using GraphQuery with Integration Fields and I will let you know once I get any updates.

8

Hi @kieranstartup,

This happens due to the way gatsby-source-prismic handles Integration Fields. In this case, I think you will see the same result if you remove your fetchLinks and/or graphQuery options.

Some background context: gatsby-source-prismic does some tricks to support Integration Fields in GraphQL. Part of that is replacing the field with an ID to another node in Gatsby's data store. Unfortunately, that means you only have access to the ID when the document is accessed outside GraphQL (such as in your Link Resolver).

2 Likes