Get all collections of collection [not products] with a single json response | pagination

[begginer1231]

Hi,

I am interested in filtering collections of collections (not products) but realized that Shopify is incapable of doing so (because pagination in Shopify retrieves every collection available on the store and liquid is SSR) .

Therefore I want to paginate collections of collections without having to use paginate. However, I will need to first retrieve all collections which satisfy the following condition: metafields.custom.is_vendor == true.

After retrieving the collection I would like to paginate the collections list with JS (not paginate tag from liquid).

The collections list can be filtered by regions. Each collection has the following: metafields.custom.region. 

Is it possible to send a request to Shopify to retrieve all collections (where metafields.custom.is_vendor == true) within a file inside a theme? I am unfamiliar with Shopify. 

Thank you in advance. 

[SocialAutoPost · Accepted solution]

Hey @SB89tbgc 

It is not possible to filter collections of collections in Shopify using pagination. This is because pagination in Shopify retrieves all collections available on the store, and liquid is server-side rendered, which means that the collections are not available on the client-side to be filtered using JavaScript.

However, you can use the Shopify GraphQL API to retrieve and filter collections of collections based on the metafields and other properties of the collections. You can do this by sending a GraphQL query to the API endpoint, and specifying the conditions that you want to use to filter the collections.

For example, to retrieve all collections where the metafields.custom.is_vendor field is true, you could use the following GraphQL query:

query {
  collections(query: "metafields.custom.is_vendor:true") {
    edges {
      node {
        id
        title
        metafields {
          key
          value
        }
      }
    }
  }
}

You can then use this query to retrieve the filtered collections from the API, and use JavaScript to paginate the collections list on the client-side. You can also use the GraphQL query to filter the collections by region, by using the metafields.custom.region field in the query, as shown in the example below:

query {
  collections(query: "metafields.custom.is_vendor:true AND metafields.custom.region:<region-name>") {
    edges {
      node {
        id
        title
        metafields {
          key
          value
        }
      }
    }
  }
}

In this way, you can use the Shopify GraphQL API to retrieve and filter collections of collections, and use JavaScript to paginate the collections list on the client-side. This will enable you to implement custom filtering and pagination for collections in your Shopify store, without using the paginate tag from liquid.

[SocialAutoPost · Accepted solution]

It is possible to use GraphQL (Node.js) within a Shopify theme, but it would require some custom development work to integrate the two.

Shopify provides a shopify-app-template-node template that includes support for GraphQL and Node.js, but this template is intended for use with standalone Shopify apps, rather than with Shopify themes. In order to use GraphQL and Node.js within a Shopify theme, you would need to manually integrate the necessary code and libraries into your theme.

To do this, you could start by copying relevant files and dependencies from the shopify-app-template-node template into your theme. This would likely involve copying the graphql and node-fetch dependencies, as well as the api.js and server.js files that contain the GraphQL server code.

Once you have copied these files into your theme, you would need to modify the server code to work with your theme, and create any necessary GraphQL queries and resolvers to fetch the data you need from your Shopify store. You would then be able to use the response of these queries within your theme, either by rendering the data directly in your Liquid templates, or by passing it to your JavaScript code for further processing.

This process can be complex, and it would require a working knowledge of Node.js, GraphQL, and Shopify theme development. If you're not familiar with these technologies, I would recommend reaching out to a Shopify expert or development agency for assistance.

Here are a few resources that may be helpful if you're interested in learning more about using GraphQL with Shopify themes:

• The Shopify Help Center article on using GraphQL with Storefront API: https://help.shopify.com/en/api/storefront-api/getting-started#use-graphql-with-storefront-api

[SocialAutoPost · Accepted solution]

Hey @SB89tbgc 

It is not possible to filter collections of collections in Shopify using pagination. This is because pagination in Shopify retrieves all collections available on the store, and liquid is server-side rendered, which means that the collections are not available on the client-side to be filtered using JavaScript.

However, you can use the Shopify GraphQL API to retrieve and filter collections of collections based on the metafields and other properties of the collections. You can do this by sending a GraphQL query to the API endpoint, and specifying the conditions that you want to use to filter the collections.

For example, to retrieve all collections where the metafields.custom.is_vendor field is true, you could use the following GraphQL query:

query {
  collections(query: "metafields.custom.is_vendor:true") {
    edges {
      node {
        id
        title
        metafields {
          key
          value
        }
      }
    }
  }
}

You can then use this query to retrieve the filtered collections from the API, and use JavaScript to paginate the collections list on the client-side. You can also use the GraphQL query to filter the collections by region, by using the metafields.custom.region field in the query, as shown in the example below:

query {
  collections(query: "metafields.custom.is_vendor:true AND metafields.custom.region:<region-name>") {
    edges {
      node {
        id
        title
        metafields {
          key
          value
        }
      }
    }
  }
}

In this way, you can use the Shopify GraphQL API to retrieve and filter collections of collections, and use JavaScript to paginate the collections list on the client-side. This will enable you to implement custom filtering and pagination for collections in your Shopify store, without using the paginate tag from liquid.

[begginer1231]

Hi @SocialAutoPost 

Thank you for the detailed reply. 

Is it possible to use GRAPH QL (NODEJS) within a template (theme which consists of plain liquid and plain js) I installed?

Shopify seems to provide a shopify-app-template-node but would I be able to use the response of query within a standard shopify theme? Or do I need to copy some files from shopify-app-template-node to the template? If you know any articles or blogs that might be helpful, could you share it with me?

Thanks

[SocialAutoPost · Accepted solution]

It is possible to use GraphQL (Node.js) within a Shopify theme, but it would require some custom development work to integrate the two.

Shopify provides a shopify-app-template-node template that includes support for GraphQL and Node.js, but this template is intended for use with standalone Shopify apps, rather than with Shopify themes. In order to use GraphQL and Node.js within a Shopify theme, you would need to manually integrate the necessary code and libraries into your theme.

To do this, you could start by copying relevant files and dependencies from the shopify-app-template-node template into your theme. This would likely involve copying the graphql and node-fetch dependencies, as well as the api.js and server.js files that contain the GraphQL server code.

Once you have copied these files into your theme, you would need to modify the server code to work with your theme, and create any necessary GraphQL queries and resolvers to fetch the data you need from your Shopify store. You would then be able to use the response of these queries within your theme, either by rendering the data directly in your Liquid templates, or by passing it to your JavaScript code for further processing.

This process can be complex, and it would require a working knowledge of Node.js, GraphQL, and Shopify theme development. If you're not familiar with these technologies, I would recommend reaching out to a Shopify expert or development agency for assistance.

Here are a few resources that may be helpful if you're interested in learning more about using GraphQL with Shopify themes:

• The Shopify Help Center article on using GraphQL with Storefront API: https://help.shopify.com/en/api/storefront-api/getting-started#use-graphql-with-storefront-api

[begginer1231]

@SocialAutoPost Thank you again. I have one question regarding conditionally querying collections.

query {
  collections(query: "metafields.custom.is_vendor:true") {
    edges {
      node {
        id
        title
      }
    }
  }
}

returns:

{
  "data": null,
  "errors": [
    {
      "message": "you must provide one of first or last",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "collections"
      ]
    }
  ],
  "extensions": {
    "cost": {
      "requestedQueryCost": 2,
      "actualQueryCost": 2,
      "throttleStatus": {
        "maximumAvailable": 1000,
        "currentlyAvailable": 998,
        "restoreRate": 50
      }
    }
  }
}

How do I avoid this error? First or last seems to retrieve certain numbers of collections.

Thank you

[SocialAutoPost · Accepted solution]

The error you're seeing when you run your GraphQL query is due to the fact that the collections query requires you to specify either the first or last argument, which determines the number of collections to retrieve.

To avoid this error, you can simply add either the first or last argument to your query, and specify the number of collections you want to retrieve. For example, you can use the following query to retrieve the first 10 collections that match your query:

query {
  collections(query: "metafields.custom.is_vendor:true", first: 10) {
    edges {
      node {
        id
        title
      }
    }
  }
}

Alternatively, you can use the pageInfo field in the query response to paginate the results and retrieve more than 10 collections. This can be useful if you have more than 10 collections that match your query, and you want to retrieve them all in multiple requests.

Here is an example of how you might use the pageInfo field to paginate the results and retrieve all of the matching collections:

query {
  collections(query: "metafields.custom.is_vendor:true", first: 10) {
    edges {
      node {
        id
        title
      }
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
    }
  }
}

In this example, the pageInfo field in the query response will contain two fields: hasNextPage and hasPreviousPage. These fields will be set to true if there are more collections to retrieve, and false if there are no more collections to retrieve.

You can use these fields to determine whether to make additional requests to retrieve the remaining collections. For example, you can use the after argument in the collections query to specify the cursor position of the last collection in the previous response, and retrieve the next 10 collections that match your query.

Here is an example of how you might use the after argument to retrieve the next 10 collections that match your query:

query {
  collections(query: "metafields.custom.is_vendor:true", first: 10, after: "YXJyYXljb25uZWN0aW9uOjk=") {
    edges {
      node {
        id
        title
      }
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
    }
  }
}

In this example, the after argument specifies the cursor position of the last collection in the previous response, which allows the query to retrieve the next 10 collections that match your query.

Hope it helps

[begginer1231]

Thank you again!  @SocialAutoPost 

Although I queried through collections with the condition where each collections' is_vendor==true, the query retrieved collections such as 'seasonal collections' and 'featured collections'.

I am wondering why the 'filter' is not working.

Edit:

I think I got it. There is no such thing as filtering by meta fields for collection at the moment.

In this case, do you think I can use IDs and handles to filter like the following?

For instance, a vendor collection's handle will be like: "VendorName_isVendor_regionX"

query {
  collections(handle: "*isVendor*" AND handle: $JSVariable, first: 10) {
    edges {
      node {
        id
        title
      }
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
    }
  }
}

Additionally, where do you get the "YXJyYXljb25uZWN0aW9uOjk=" from?