When useQuery parsing the JSON data, boolean data gets wrong

Help
,
1

I am a front developer developing in the react environment. In the current project, data is queried from the graphql server through the useQuery hook of the apollo client library. At this time, there are cases where the data in the actual DB and the data parsed by useQuery are different. This case only occurs when the data is of type boolean. Below is my simple code from my project.

const { data } = useQuery(QUERY);
if(data) console. log(data);

The data received in the above method and the data in the actual DB did not match, so I checked the response JSON data actually delivered to the browser, and it was confirmed that the JSON data was delivered successfully. However, after parsing by the useQuery hook, I confirmed that the data was distorted. The issue occurs only for boolean data. What could be the cause?

2

Can you give a little bit more context here? What does the query look like? What is the response?

3

Thanks for reply. Here it is!
[Query]
const GET_SEGMENTLOG_FROM_HISTORY = gql query { segmentHistory (){ nodes { timestamp segment { id forbidFull disabled } } } } ;

[useQuery]
const { data: data5 } = useQuery(GET_SEGMENTLOG_FROM_HISTORY, {variables: { segmentKey, maxFrom, maxTo }});
if(data5) console.log(data5);

[Response JSON Data]
{“data”:{“segmentHistory”:{“nodes”:[{“timestamp”:“2023-06-16T05:13:49.344Z”,“segment”:{“id”:177,“forbidFull”:false,“disabled”:true}},{“timestamp”:“2023-06-16T05:13:51.590Z”,“segment”:{“id”:177,“forbidFull”:false,“disabled”:false}}]}}}

[Parsing Data from useQuery (it means data5)]

캡처_2023_06_16_17_54_39_626
캡처_2023_06_16_17_54_39_6261073×284 19.7 KB

4

I’m a bit irritated that the return JSON does not have __typename in it - is that really the response the browser receives from the network tab?

5

Yes. The data is quite long, so I just fetched the front part.
Here’s the full Response.

[Full query]
const GET_SEGMENTLOG_FROM_HISTORY = gql query { segmentHistory (){ pageInfo { hasNextPage hasPreviousPage endCursor startCursor } nodes { timestamp segment { id forbidFull disabled speedRatio startNodeId endNodeId length } } } } ;

[Full Response JSON]
{“data”:{“segmentHistory”:{“pageInfo”:{“hasNextPage”:false,“hasPreviousPage”:false,“endCursor”:“FgAAAAdfaWQAZIvwlxWNEXsP6IqDAA==”,“startCursor”:“FgAAAAdfaWQAZIvvjRWNEXsP6ICoAA==”,“__typename”:“PageInfo”},“nodes”:[{“timestamp”:“2023-06-16T05:13:49.344Z”,“segment”:{“id”:177,“forbidFull”:false,“disabled”:true,“speedRatio”:1,“startNodeId”:“37”,“endNodeId”:“38”,“length”:5500,“__typename”:“Segment”},“__typename”:“SegmentHistory”},{“timestamp”:“2023-06-16T05:13:51.590Z”,“segment”:{“id”:177,“forbidFull”:false,“disabled”:false,“speedRatio”:1,“startNodeId”:“37”,“endNodeId”:“38”,“length”:5500,“__typename”:“Segment”},“__typename”:“SegmentHistory”},{“timestamp”:“2023-06-16T05:14:59.930Z”,“segment”:{“id”:177,“forbidFull”:true,“disabled”:false,“speedRatio”:1,“startNodeId”:“37”,“endNodeId”:“38”,“length”:5500,“__typename”:“Segment”},“__typename”:“SegmentHistory”},{“timestamp”:“2023-06-16T05:17:31.512Z”,“segment”:{“id”:177,“forbidFull”:true,“disabled”:true,“speedRatio”:1,“startNodeId”:“37”,“endNodeId”:“38”,“length”:5500,“__typename”:“Segment”},“__typename”:“SegmentHistory”},{“timestamp”:“2023-06-16T05:18:15.630Z”,“segment”:{“id”:177,“forbidFull”:true,“disabled”:false,“speedRatio”:1,“startNodeId”:“37”,“endNodeId”:“38”,“length”:5500,“__typename”:“Segment”},“__typename”:“SegmentHistory”}],“__typename”:“SegmentHistoryConnection”}}}

[Full Parsing Data from useQuery]

캡처_2023_06_16_18_08_32_282
캡처_2023_06_16_18_08_32_2821545×679 48.7 KB

6

I see your problem. Your JSON contains these two values:

{“id”:177,“forbidFull”:true,“disabled”:false,“speedRatio”:1,“startNodeId”:“37”,“endNodeId”:“38”,“length”:5500,“__typename”:“Segment”},“__typename”:“SegmentHistory”},

and

{“id”:177,“forbidFull”:false,“disabled”:false,“speedRatio”:1,“startNodeId”:“37”,“endNodeId”:“38”,“length”:5500,“__typename”:“Segment”},“__typename”:“SegmentHistory”},

Both of these have the __typename: "Segment" and id: 177, so they will both be identified as Segment:177 inside the Apollo Cache - and overwrite each other.

If those are different objects, you have to make sure to give them different unique identifiers (id).

7

Oh! Thank you!
Those are log data. so when Object’s value has changed, log would be written in same object Id. I don’t think that I can fix that data because that is not our server and db. Is there any method that prevent the overwrite in client side? I just want exactly same data from DB.

8

You would disable normalization by defining a typePolicy for the Segment type and set keyFields to false.

9

Oh It works!! Thank you so much!

10

Great :slight_smile: You’re welcome!