[UI-Extension] - Debugging Graphql Queries (products inCollection)

Retired Boards Appdev Graphql Basics And Troubleshooting
,
1

Hi All, I have the following graphql query.

query ($first:Int!, $collectionId:ID!, $query:String){
  products(first:$first,query:$query) {
    nodes {
      inCollection(id: $collectionId)
    }
  }
}

{
  "first": 1,
  "query": "id:8880883990804",
  "collectionId": "gid://shopify/Collection/468654686484"
}

Which when running in graphiql works just fine and returns the desired results.

  "data": {
    "products": {
      "nodes": [
        {
          "inCollection": false
        }
      ]
    }
  },

so I want to incorporate this query in my extension.

 const { data } = await query(
        `query ($first: Int!, $collectionId:ID!, $query:String) {
          products(first: $first, query: $query) {
            nodes {
              inCollection(id: $collectionId)
            }
          }
        }`,
        {
          variables: { 
            first: lines.length,
            query: idQuery,
            collectionId: collectionId 
          }
        }
      )

but data is coming back undefined.

I tried several variations even hardcoding all the values, the only thing that seemed to work is when I left the “inCollection” out, but thats kind of the whole point of the query is to find out if the line items is part of a specific collection.

Could it be that inCollection is not currently supported via the storefront api?

UPDATE:

I fixed the access scope issue and now have the appropriate access scopes granted to the extension but still the issue remains that as soon as I include the inCollection property in the GraphQL query the query fails to return anything.

Anyone have any ideas?

Cheers,

Gary

2

Are you sure the product is in a given collection

3

Errm… Yeah, make sure you re-install the app after you update the access scopes :slightly_smiling_face:

Interestingly enough it works now in the graphiql app page with the apps persmissions but still not withing the extension.

So although this only solved part of the problem the issue still remains that as soon as I include the inCollection property of the product it returns nothing.

4

Hey thanks for writing :slightly_smiling_face:

Yeah, tested it.. I had updated the scopes before building the query, deployed the app but forgot to go through the oauthflow in the app again to grant the scopes … noob mistake :slightly_smiling_face:

It now works in graphiql with the app scope from the shopify cli, but still not in the app itself. Just getting undefined back for data

5

Shopify’s GraphQL API expects IDs to be in a global format. Like this:

gid://shopify/Product/910489600

I think this is the issue:

"query": "id:8880883990804",

Your variables should look something like this:

const variables = {
  first: 1,
  query: 'id:gid://shopify/Product/8880883990804',
  collectionId: 'gid://shopify/Collection/468654686484',
};
6

Hi SomeUsernameHe,

Not if the id is part of the query paramter, then you can use just the ID and not the GID. Like I mentioned in my first post, the query works fine and returns the expected result, except when I call it from within the checkout ui extension, then it returns undefined.. not product not found but undefined. It would be nice to get at least an error back.

Cheers,

Gary

7

Question: have you even tried using GID here and see if that changes anything? You are running a graphql query with literally 3 variables… One of them is probably wrong. Maybe UI extensions require GID?

8

Hi,

Thanks for your question.

Yes I did try that, using the GID in the query arguments returns zero results. You use just the ID part and not the GID in the query argument. As I mentioned in my initial post, the query returns the correct results using the GraphiQL app, but not within the extension.

Also apparently the reason it doesn’t work is that the inCollection attribute is not supported in the storefront graphql API.

I got an answer from Shopify Support on this. The alternative of returning all products in the collection and then searching for the product I am looking for seems a bit too much since the collection has hundreds of products in it. So now I think i need to hit the real graphql endpoint instead of using the storefront api. The only problem is I haven’t seen any examples in the docs on how to do this.

Cheers,

Gary

9

I have stumbled upon the same issue when I was trying to check if the product in checkout is in a specific collection.

I’ve also tried to query the collection with the “hasProduct” attribute. Returns “undefined” this way or another.

I’ve tried to send both queries through Postman and it works fine, but not when querying from the checkout ui extension.

I’ve also tried to send a query without “inCollection” or “hasProduct” attribute and just get a title - that works.

I think it has something to do with the fact that it is a query in a query. If it is intentionally not supported, it is not documented as such. Otherwise I hope this will be fixed soon.

@Shopify_77 please forward it as a possible bug to the dev team

10

I am having the same problem with productVariant(id:$id). It works fine in the graphql app but does not work in the extension. It does not matter if I only try to query title, or ID only, I always get undefined..
However, this one works..

query: `query ($first: Int!) {
  products(first: $first) {
    nodes {
      id
      title
    }
  }
}`,
11

Have you set the extensions.capabilities api_access to true in the toml file?

12

Yes it is set to true and the “read_product” access scope is set aswell

13

So if you just query for the title or id separately id returns undefined, but when querying for both it works?

14

I read your message again, this time correctly ?‍ and could replicate the same behaviour, productVariant returns undefined

1 Like
15

I just tested the following which works as expected. But If I try to query anything else besides title or ID, (eg. price on the variant ) it returns “undefined”.

To me this seems like it is not intended. @Shopify_77 maybe you can clarify this

query {
  collections(first: 5) {
    edges {
      node {
        id
        title
        products(first: 10) {
          edges {
            node {
              title,
              variants(first: 10) {
                edges {
                  node {
                    title
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
16

Hey All,

Got word back from shopify support. Apparently inCollection is not supported with the storefront API graphql implementation (I don’t see why not really since the unauthenticated product access gives access to both collections and products).

I hope they implement it in the future but in the mean time I will set up network access on my extension and proxy the call myself. I had hoped to prevent the overhead but pulling all products from this collection and then looking to see if each product is in the array is just not efficient enough.

AS a side note: It would be super if we got some kind of useful error message back instead of simply an undefined on the result of the query.

Cheers

Gary

1 Like
17

Hey,

can you share the code or point me in the right direction what to do? I am not really familiar with the network and proxy side of extensions.

Thank you!

18

just turn on network access in your extension and then make a fetch to your app 'api" url. passing in any arguments you need. I also added a session token to the call, it doesnt guarantee that much cause the calls are not signed with an hmac like webhooks are. Then I just queried the normal graphql api and returned the results.

extension toml

network_access = true

const response = await fetch(“https://[url to your app api]”,fetchConfig);

Cheers,
Gary

1 Like