Builder Operators in Apollo

Technical Questions
,
1

We’re trying to use gql to do a complex query for Builder.io content. In the Builder graphql explorer, we’re using the following query:

query {
  course(query: {
    data: "{\"$and\": [{length: {\"$gt\": 70}},{length: {\"$lt\": 100}}]}"
  }) {
    name
    data {
      length
    }
  }
}

This works well in the explorer and returns:

{
  "data": {
    "course": [
      {
        "name": "Resilience",
        "data": {
          "length": 95
        }
      }
    ]
  }
}

In NextJS, we’re using Apollo. Basic queries work well for us, but the above query using operators throws the attached error:

GraphQLError: Syntax Error: Expected Name, found "$".

It seems that gql struggles with supporting the $ symbol like in the above query. How can we structure the above query using Apollo in React?

Builder content link

Builder public api key
4ccc9312e0d14fb3b6d94d2864010b90

What are you trying to accomplish
I want to use GraphQL with advanced quering between NextJS and Builder.io.

Screenshots or video link

Screenshot 2023-11-24 at 13.37.28
Screenshot 2023-11-24 at 13.37.281454×1182 75.2 KB

Code stack you are integrating Builder with
NextJS

2

Hello @CourseStudio,

For assistance, you may find helpful information in our forum. Check out the discussion on Mongo operators in a GraphQL query at the following link:

3

Hi Manish

Thank you for linking the post. We’ve seen that post and are utilising the solution as you can see above in our post. As mentioned before, it works perfectly in the GraphQL Explorer, but not in the code when using Apollo.

Any guidance here would be much appreciated.

4

Hello @CourseStudio,

The error “Expected Name, found ‘$’” in GraphQL typically occurs when you are using a GraphQL variable and you haven’t provided a name for it. In GraphQL, variables are denoted by a dollar sign $ followed by a variable name.

Here is an example of a correct GraphQL query with a variable:

query GetItemDetails($itemId: ID!) {
  item(id: $itemId) {
    id
    name
    description
  }
}

Ensure that you are adhering to the correct syntax for variables in your GraphQL query. If the error persists, kindly share the complete GraphQL query where you are encountering the issue for further assistance.

Best regards,

5

Hi Manish

Yes that is correct. But Builder seems to want to use the $ symbol in their query operators on the Query Docs.

To use this with GraphQL, we’re using syntax in the solution on the above forum post

As mentioned before, this works fine in the GraphQL explorer. We’re using this query:

query {
  course(query: {
    data: "{\"$and\": [{length: {\"$gt\": 70}},{length: {\"$lt\": 100}}]}"
  }) {
    name
    data {
      length
    }
  }
}

Which returns this in the explorer:

{
  "data": {
    "course": [
      {
        "name": "Resilience",
        "data": {
          "length": 95
        }
      }
    ]
  }
}

But this yields this error when used using Apollo:

const { data } = await client.query({
    query: gql`
      query {
  course(query: {
    data: "{\"$and\": [{length: {\"$gt\": 70}},{length: {\"$lt\": 100}}]}"
  }) {
    name
    data {
      length
    }
  }
}
    `,
  });
6

Hello @CourseStudio,

It appears that the variable $and may be causing an issue as GraphQL doesn’t directly recognize it within the query string. Could you please try the following modification and see if it resolves the problem?

const { data } = await client.query({
  query: gql`
    query GetCourse($query: CourseQueryInput!) {
      course(query: $query) {
        name
        data {
          length
        }
      }
    }
  `,
  variables: {
    query: {
      $and: [
        { length: { $gt: 70 } },
        { length: { $lt: 100 } }
      ]
    }
  }
});
7

Thanks for the provided code. It really helps!

How can I add CourseQueryInput!? Where should that come from?

8

Hello @CourseStudio,

The CourseQueryInput should come from graphql scheme on the server, which I assume we don’t have, therefore, you can update the code as shown below

const { data } = await client.query({
  query: gql`
    query GetCourse($lengthFilter: CourseLengthFilter!) {
      course(lengthFilter: $lengthFilter) {
        name
        data {
          length
        }
      }
    }
  `,
  variables: {
    lengthFilter: {
      $gt: 70,
      $lt: 100
    }
  }
});

or

const { data } = await client.query({
  query: gql`
    query {
      course(query: {
        data: {
          $and: [
            { length: { $gt: 70 } },
            { length: { $lt: 100 } }
          ]
        }
      }) {
        name
        data {
          length
        }
      }
    }
  `,
});

Hope this helps!

9

We’ve found a working solution to this problem. When using operators in Apollo, they need to be wrapped by a combination of {} and "" like below:

// Array of builder content ids
const ids = ["34f3fdf343sdsad34", "f3244343434fdsf34"];

/**
* We use JSON.stringify to convert an array to a comma separated string. 
* Notice we don't wrap the string with quotes here. 
* We use regex to escape quotes inside the string.
**/
gql`
query {
  page(query: {
    id: "{$in: ${JSON.stringify(ids.map((id) => id.builder_id)).replace(/"/g, '\\"')}}"
  }) {
    name
    createdAt
  }
}
`
1 Like