Simplest usage of GraphQL using WHERE, AND, OR while using a Query Parameter

Question

I'm creating a search query for a simple search on a site using GraphQL.

I've been looking for the absolutely simplest working examples of GraphQL but the questions/examples I've found on Stack Overflow are either too simple, too specific, or way too technical including too many unnecessary bits from the API.

The patterns of when to use the {}, when to use the where, and when optional naming come into play seem to disrupt the patterns that are explained in the docs.

Any insight here would be much appreciated.

Answer 1

Great question.

Here's how I would start. I will assume you have setup a database with Products and those Products have a name and a description.

First - here's how you get all the products (you will be inputting this into the GraphQL playground).:

query {
  allProducts {
    name
    description
  }
}

Second - here's how you get a product with a specific name:

query {
  allProducts (where: {name: "Nike Air VaporMax"}){
    name
    description
  }
}

Third - here's how to introduce "contains" as in name or description contains "nike". The _i suffix means case insensitive.

query {
  allProducts (where: {name_contains_i: "nike"}){
    name
    description
  }
}

Fourth - here's how to introduce an OR (note the commas and the container curly brackets):

query {
  allProducts (where: {
    OR: [{description_contains_i:"shoes"}, {name_contains_i:"shoes"}]
    }
  )
    {
    name
    description
  }
}

Fifth - here's how to introduce the AND (same as above, note the comma and the curly brackets):

query {
  allProducts (where: {
    AND: [{description_contains_i:"shoes"}, {name_contains_i:"shoes"}]
    }
  )
    {
    name
    description
  }
}

Sixth - here is how to start introducing variables - we'll use this with a WHERE + OR:

query ($varTest: String!) {
  allProducts(
    where: {
      OR: [{ description_contains_i: "shoes" }, { name_contains_i: $varTest }]
    }
  ) {
    name
    description
  }
}

And !important! for the above, you will need to fill in the Query Variables:

{
  "varTest": "Nike"
}

In case, you're not familiar with the placement of where to put the Query Variable, it will roughly look like this (look for the second window in which to place the Query Variables.)

Seventh - here is the kicker. You can optionally name these queries. The disruption in the pattern consistency threw me off initially. Let me add it here with a pretty obvious name so you can see it too:

query THIS_IS_MY_COOL_QUERY_NAME($varTest: String!) {
 allProducts(
    where: {
      OR: [{ description_contains_i: "shoes" }, { name_contains_i: $varTest }]
    }
  ) {
    name
    description
  }
}

Eight - bonus. You won't need this BUT I want to introduce it here so it doesn't throw you off in the future. When you submit the query, you can assign your own name for the returned array of returned objects. Don't let this previous sentence confuse you, I'll give you examples of the returned array so it's clear.

Here is the Eight query (don't forget to use a Query Variable as you did in the Seventh example). I'll add a pretty obvious name directly in the query:

query THIS_IS_MY_COOL_QUERY_NAME($varTest: String!) {
  resultsWillBeReturnedAsArrayWithThisName: allProducts(
    where: {
      OR: [{ description_contains_i: "shoes" }, { name_contains_i: $varTest }]
    }
  ) {
    name
    description
  }
}

The results from previous query (Seventh) will look like this:

{
  "data": {
    "allProducts": [
      {
        "name": "Air Jordan 1",
        "description": "Wow - there are shoes!"
      },
      {
        "name": "Nike Blazer Mid",
        "description": "Very nice!"
      },
      {
        "name": "Shoes",
        "description": "These are shoes!"
      }
    ]
  }
}

But the results from the Eight Query will look like this (notice how the name you introduced will come back to you from GraphQL). :

{
  "data": {
    "resultsWillBeReturnedAsArrayWithThisName": [
      {
        "name": "Air Jordan 1",
        "description": "Wow - there are shoes!"
      },
      {
        "name": "Nike Blazer Mid",
        "description": "Very nice!"
      },
      {
        "name": "Shoes",
        "description": "These are shoes!"
      }
    ]
  }
}

That should give you a solid building block to understanding GraphQL.