Efficiently get product categories related to products with GraphQL (WPGraphQL for Wordpress)

Question

I'm using Wordpress, Woocommerce, WooGraphQL, React and Next for a headless eCommerce solution, utilizing SSG and SSR for SEO and performance.

I'm concerned about performance when it comes to populating product filters on category pages. I only want to show filters relating to the products that match the search.

Hypothetical example:

Product search yields 500 results.
Request data for the first 12 products using GraphQL to show on the first page.
(Issue) Getting the data to populate the filters for all 500 products.

In my case, the filters are product categories, and each product is linked to 3 categories.

The only thing I can think of is to request data for all 500 products and then loop over each product in the array in order to access the related categories and populate the filters.

In my real-world project, there will really be no more than maybe 100 products but I'd ideally like to take a scalable approach.

Is pulling this amount of data something I should be concerned about or am I overthinking it? (I'm guessing not) If not, what would be a better solution to this kind of problem?

Example GraphQL request would look like this:

query MyQuery {
  products(first: 500, where: {search: "something"}) {
    nodes {
      productCategories {
        nodes {
          name
        }
      }
    }
  }
}

I understand that taking a page by page appoach to pulling data is best. But the problem of gathering up so much data still stands.

score 0 · Answer 1 · answered Feb 03 '21 at 09:21

i was exactly in the same spot last week. My solution was to create the filters that I knew were included in the category as an ACF list. The problem is that you have to type all the filters you want for every category but it solves the problem of querying thousands of products when you only need 12. It looks something like that wordpress-category-view

score 0 · Answer 2 · answered Feb 07 '21 at 02:45

You can simply take the databaseId of the resulting products and use them as $objectIds is this query

query ($objectIds: [ID] ){
  productCategories(where: {objectIds: $objectIds}) {
    nodes {
      databaseId
      name
    }
  }
}

That should retrieve all the connected categories, then if you make some minor changes to your initial query, you can take databaseId of the productCategories selected for filters and store them as $categories in the refactored version of you initial query.

query (search: String, $categories: [Int] ){
  products(first: 100, where: {search: $search, categoryIdIn: $categories}) {
    nodes {
      databaseId
      name
    }
  }
}

Two small notes, unless you override the amount using this filter in WPGraphQL you cannot retrieve more than 100 results at once from a connection query.

Efficiently get product categories related to products with GraphQL (WPGraphQL for Wordpress)

2 Answers2