Query works in GraphiQL but returns empty array in Actual Code while using React Apollo

Question

I have a simple query like this

import gql from "graphql-tag";

export const GET_TODOS_BY_PRODUCT = gql`
  query getTodosByProduct(
    $id: ID!
    $completed: Boolean = false
    $limit: Int = 100
  ) {
    product(id: $id) {
      hashtag
      todos(completed: $completed, limit: $limit) {
        body
      }
    }
  }
`;

In GraphiQL, it returns results like -

{
  "data": {
    "product": {
      "todos": [
        {
          "body": "Remove Custom Font from Tweet #a2k",
          "product": {
            "id": "1439"
          },
          "__typename": "Todo"
        },
        {
          "body": "Make Site a PWA #a2k",
          "product": {
            "id": "1439"
          },
          "__typename": "Todo"
        }
            ]
        }
    }
}

But while using React Apollo's Query component, it returns the hashtag properly but returns todos as an empty array [] & I can't seem to figure out what's wrong with the query.

If I fetch additional parameters from the query outside of todos then it returns them properly but only todos returns empty array [].

I am requesting it like -

<Query
      query={GET_TODOS_BY_PRODUCT}
      variables={{ id: state.get("selectedProduct.id") }}
    >
      {({ data: { product } }) => {
        return <Main todos={product.todos} hashtag={product.hashtag} />;
      }}
</Query>

And I can't seem to figure out why something's wrong? Any suggestions?

Is it possible that you don't have any results for `completed=false`? — dkulkarni, Aug 05 '18 at 11:37
No as I said I get results in GraphiQL & its the same query copy-pasted which means it uses `completed=false` in GraphiQL itself — deadcoder0904, Aug 05 '18 at 11:39
Ohh hell you are right. Idk how it is showing in GraphiQL then. Its not my API. Thank you @dkulkarni — deadcoder0904, Aug 05 '18 at 11:41
Ace! You're welcome. I'm not sure what your query on Graphiql is exactly but it is very likely your query in graphiql is different to the one defined with Apollo :) — dkulkarni, Aug 05 '18 at 11:43
Again you are right & damn you are fast. Thank you I was trying to figure this out for 2 hours — deadcoder0904, Aug 05 '18 at 11:45

score 0 · Accepted Answer · answered Aug 05 '18 at 11:47

Thanks to @dkulkarni I found the solution. In my GraphiQL, completed was true & in Apollo, I didn't set it up so it was false.

And my product didn't have any completed equal to false so it was messing up.

Thanks again @dkulkarni I wasted 2 hours for this thing

Query works in GraphiQL but returns empty array in Actual Code while using React Apollo

1 Answers1

Linked