Got Cornered in a multiple "array-in" query! What could be the best workaround?

[sniperadmin]

Note A POC is included below

Project Stack:

• [email protected]
• @nuxtjs/firebase

Overview of the issue/question:

In a Firebase document, we have 2 attributes with <Array> type

const Pitch = {
  // ...
  formats: [],
  themes: []
}

When trying to filter pitch documents based on both fields, we get trapped in a corner where there is a Firebase caveat in Compound queries FirebaseError: [code=invalid-argument]: Invalid query. You cannot use more than one 'array-contains' filter

Actual POC

The following sandbox illustrates the actual complex component: https://stackblitz.com/edit/nuxt-starter-8dqt1c?file=README.md

Question

What's the best workaround to get the filtration scenario easier as a development experience?

[posva]

I read somewhere in the past that one would just filter in the front. In Vue, you could put that in a computed property

[sniperadmin]

It looks like this is the only way to use the client side