GraphQL Multiple Search Filters and Case Insensitive Search

Learn how to get around GraphQL limitations with case insensitive search and adding multitple search filters to the query

Photo by Christina @ wocintechchat.com on Unsplash

I am pretty new to GraphQL. While I love it, I figured it is still pretty young and there are limitations to it. In this article (exercise), we will hack our way into implementing Multiple Search Filters and Case Insensitive Search

There are two problems we are trying to solve:

Problem 1: Multiple Where Clauses in Filters Not Allowed

Currently, you cannot filter GraphQL results with more than two “where” clause. Wouldn’t it be awesome if you could execute and manipulate result with conditional filters as below:

Select * from table-name where item1 = <item_1> and item2= <item_2>

Sadly, it is not currently possible

I researched and encountered a lot of open asks where people are trying to implement similar functionality,

  1. https://stackoverflow.com/questions/48731361/graphql-how-to-perform-where-clause
  2. https://stackoverflow.com/questions/52347310/graphql-conditional-queries
  3. https://stackoverflow.com/questions/37981269/how-to-search-string-values-in-graphql
  4. https://stackoverflow.com/questions/54215349/graphql-where-clause-angular-apollo-client
  5. https://stackoverflow.com/questions/48912739/how-can-i-do-a-wpgraphql-query-with-a-where-clause

Problem 2: Search in Filters is Case Sensitive

Believe it or not, if you want to query your GraphQL table, it has to be a case sensitive search. If one of the value is “mind and matter”, you cannot query it as :

query MyQuery {
listData (filter: {data: {contains: "Mind"}}) {
items{
id,
name
}
}
}

I know! That’s a bummer!!

There is currently no official solution in place apart from string manipulations while reading, rendering, and posting. That sounds like a lot of irrelevant redundant code. Here are some of the open questions out there —

  1. https://stackoverflow.com/questions/48303193/make-case-insensitive-graphql-query
  2. https://stackoverflow.com/questions/53878566/how-to-make-a-case-insensitive-graphql-query
  3. https://stackoverflow.com/questions/48142347/graphql-sorting-case-insensitive
  4. https://stackoverflow.com/questions/51526079/how-to-use-or-and-in-graphql-query-filter-or-make-a-case-insensitive-filter
  5. https://github.com/graphql/graphql-js/issues/585#issuecomment-262402544

Solution:

To explore a workaround, I tried changing my schema a little. I added a new field in my table schema, “searchQuery” to index search results based on the query

type data @model {
id: ID!
name: String!
address: String!
searchString: String
}

When I load data in my table, I created my JSON like,

data = new data() 
data.id = self.id
data.name = self.name
data.address = self.address
data.searchString = String(self.name.lowercased() + self.address.lowercased())

If you notice, I am converting every field that I want to set up search index on, to Lower Case. This will help us making the query below.

query = "SoME StrInG HeRE"
query = query.lowercased() //Yes I love SWIFT

Now we can send this query as a filter to our Data Table.

query MyQuery {
listData (filter: {searchString: {contains: query}}) {
items{
id,
name
}
}
}

With this, we have multiple filters working, and the search is case insensitive. While this is just a workaround (we call it ‘Hack’) to compensate for GraphQL limitations, I hope we get to see something similar officially included in GraphQL’s upcoming updates. For now though, It Works !! Happy Hacking!

Please keep an eye out for more such articles to come.

International writer with diverse interests

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store