3
votes

Overview

I am using @apollo/hooks in a react typescript app, and Hasura/Postgres on an aws ec2 instance. When I make a query to the db from react, all the boolean values in one table are returning as false. By making the same query in the Hasura GraphiQL interface, I can confirm in the database that they are not all false.

More Detail

I am trying to pull in data from a simple postgres table (no foreign keys, links to other tables, etc) that has only 6 fields:

id: number
hero_button_pointer: string
hero_button_text: string
hero_headline_text: string
hero_sub_headline_text: string
active: boolean

When I make this query in the Hasura GraphiQL interface

query GetAllHeroInfo {
  main_page_header(order_by: {id: asc}) {
    active
    hero_button_pointer
    hero_button_text
    hero_headline_text
    hero_sub_headline_text
    id
  }
}

it returns all of the values correctly. Most importantly the boolean values are correct. I have exactly the same query in my React app:

export const GET_ALL_HERO_INFO = gql`
  query GetAllHeroInfo {
    main_page_header(order_by: { id: asc }) {
      active
      hero_button_text
      hero_headline_text
      hero_sub_headline_text
      id
      hero_button_pointer
    }
  }
`;

The Big Problem

In my component I am using the useQuery hook:

import { GET_ALL_HERO_INFO } from "../../graphQL/queries";

const MyComponent: React.FC<Props> = () => {

  const { loading, error, data: heroData } = useQuery(GET_ALL_HERO_INFO);
  console.log(heroData) //everything logs correctly, except boolean values are all false

  return (
    // the component
  )
};

and when I console.log(heroData) or try to use the data in any way, all of the boolean values are false even though I can see in the database that they are true. I've updated some of the other string values directly in the database and those changes are coming through correctly. Its just the boolean values that are always false no matter what the database says.

Any ideas?

Edits

03-16-2020:20:39 - As suggested by @DanielRearden I checked the network tab to see if its a client-side or server-side issue. Looks like I am getting a response that includes a true value, but still console.loging false. I've attached photos below:

Network Tab

console.log

1
It's unlikely to be a client issue. You can confirm what actual server response you're getting is by checking the network tab in your browser's dev tools. If it's all false there, then it's the server, not the client. - Daniel Rearden
@DanielRearden Good advice checking the network tab. I checked the response to the query, and the items I expected to be true is marked as true so it looks like there might be a client issue. Any ideas on next steps to take? - Jacksonopp
I've personally never encountered anything like that. Definitely appears to be a bug. What versions of apollo-client and react-apollo are you using? - Daniel Rearden
"@apollo/react-hooks": "^3.1.3", "apollo-boost": "^0.4.7", "graphql": "^14.6.0", "graphql-tag": "^2.10.3", the client is a Hasura server V.1.1.0 - Jacksonopp
apollo-boost is using "apollo-client": "^2.6.7", - Jacksonopp

1 Answers

0
votes

As per @DanielRearden's suggestion, I migrated to the new apollo-client version, and it fixed all my issues. Looks like it was a bug ¯\_(ツ)_/¯