dynamic number of the keys and query parameters

[RadasLove]

Hello, i really try it googling this answer half day but i must ask, maybe its common...

I will make ecommerce website with diffrent filter parameter for each category

Prisma data model will look like this

Product schema
  name                      String      
  value                     String?
  product                   Product?    @relation(fields: [productId], references:[id])
  productId                 Int?

Filter schema
 name                      String      
  filters                   Filter[]

Each category page, will have different name and number of filters

Question is how can i put dynamic number of the keys in fetch query?

Example react query fetch

  const res = await fetch(
    `http://localhost:3000/api/product/get?resolution=${queryKey[0]}&color=$queryKey[1]}`
  );
  return await res.json();
};

  const { data, status } = useQuery(
    ['products', resolution, color],

    ({ queryKey }) => fetchPlanets(queryKey,)
  );

How can i put parameters and key based on some filter state like

[filter, setFilters] = useState([resolution: "800x600", color: "blue" ])

Because sometimes will be 6 items in filter arrays with different name and value.

I will use Next.JS for API and i will like somehow use the data for prisma (postgres) filter

Thanks for a help :-)

[TkDodo]

I don't understand the issue to be honest. You can put any filters into the key that you like ?

[RadasLove]

Thanks you for asnwer :-)

The problem is. I will dont know how much filters the category page will have...

Example:

Category (props.TV) can have 6x filters

- Resolution
- Color
- Manufacturer 
- Refresh rate
- Size 
- Cable

Category (props.cloth) can have 2x filters
- Size
- Color

Category (props.Laptop) can have 20 filters

- SIze
- Weight
- Display size
- Resolution
- Manufactuter
....... and 16 more

Issue for me is here

  const res = await fetch(
    `http://localhost:3000/api/product/get?resolution=${queryKey[0]}&color=$queryKey[1]}`
  );
  return await res.json();
};

  const { data, status } = useQuery(
    ['products', resolution, color],

    ({ queryKey }) => fetchPlanets(queryKey)
  );

Because in const res variable i have now "hard code"

resolution=${queryKey[0]}&color=$queryKey[1]}

And now if some customer will be for example in "Laptop" category. He can use filter like just "display size" and my hard code query looks like this

resolution=${queryKey[0]}&color=$queryKey[1]}

My issue is how can i somehow change dynamically the query on

displaysize=${queryKey[0]}

Thanks :-)

[TkDodo]

It's just a matter of how you store your client state

{
  filters: {
    categories: {
      color: ['color1', 'color2'],
      resolution: ['resolution1', 'resolution2']
    }
}

you can put that completely into the query key:

useQuery['products', filters]

and then serialize queryKey[1] to send it to the backend.