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

Solved

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

garyrgilbert
Shopify Partner
414 41 169

 

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

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Accepted Solution (1)

garyrgilbert
Shopify Partner
414 41 169

This is an accepted solution.

 

Errm...  Yeah, make sure you re-install the app after you update the access scopes 🙂

 

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.

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

View solution in original post

Replies 17 (17)

conversionist
Shopify Partner
78 8 9

Are you sure the product is in a given collection

Building 100 Shopify apps for that BMW M5 dream

Follow the journey at https://www.youtube.com/@conversinist
https://conversionist.online/
garyrgilbert
Shopify Partner
414 41 169

Hey thanks for writing 🙂

 

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 🙂

 

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

garyrgilbert
Shopify Partner
414 41 169

This is an accepted solution.

 

Errm...  Yeah, make sure you re-install the app after you update the access scopes 🙂

 

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.

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

SomeUsernameHe
Shopify Partner
495 54 99

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',
};

 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
garyrgilbert
Shopify Partner
414 41 169

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
SomeUsernameHe
Shopify Partner
495 54 99

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? 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
garyrgilbert
Shopify Partner
414 41 169

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Sven96
Shopify Partner
4 0 0

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
}
}
}`,
maks-afew
Shopify Partner
7 0 2

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

Sven96
Shopify Partner
4 0 0

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

maks-afew
Shopify Partner
7 0 2

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

maks-afew
Shopify Partner
7 0 2

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

Sven96
Shopify Partner
4 0 0

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 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
}
}
}
}
}
}
}
}
}
}

maks-afew
Shopify Partner
7 0 2

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. 

@Shopifyplease forward it as a possible bug to the dev team

garyrgilbert
Shopify Partner
414 41 169

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Sven96
Shopify Partner
4 0 0

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! 

garyrgilbert
Shopify Partner
414 41 169

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
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution