how to pass a dynamic filter arguments

[skrtz]

I'm working on an event calendar application that gets events from the Db and renders the data on the front end using react big calendar. One of the features in the application is a Filters Pane where users can specifically input data that will re-render the calendar component to filter out any specific events that don't match the inputs that the user chose.
My issue is regarding how I can set up my query so that dynamic filter values will work. For example, queries like this aren't working for me if title or dates are left out or null.
export const GET_FILTERED_EVENTS = graphql
query GetFilteredEvents($startDate: timestamptz!, $endDate: timestamptz!, $eventName: String) {
Events(
where: {
start_date: { _gte: $startDate },
end_date: { _lte: $endDate },
title: { _ilike: $eventName }
}
) {
// fields
id
title
location
etc...
}
}
;
Essentially, I do not know what fields a user wants to filter on. How can I set up my query to handle this case so that my query looks more like the following:
export const GET_FILTERED_EVENTS = graphql
query GetFilteredEvents($variable: String!) {
Events(variable: $variable) {
// fields
id
title
location
etc...
}
}
;
any time I try to run the ts codegen for this setup I get an error: ✖ Syntax Error: Unexpected "$".

[TristenHarr]

You can make the entire where clause a variable.

query MyQuery($where: events_bool_exp) {
  events(where: $where) {
    end_date_time
    start_date_time
    title
    location
  }
}

with the query variables as:

{
  "where": {
    "title": {
      "_eq": "none"
    }
  }
}

This can be used to dynamically build the query filter. Please see this doc for more info.