Скачать или смотреть Understanding the GraphQL Query Logging Issue in Gatsby

Discover why you only see a number when logging GraphQL queries in Gatsby and how to log the actual data instead.
---
This video is based on the question https://stackoverflow.com/q/62977152/ asked by the user 'BaN' ( https://stackoverflow.com/u/11847590/ ) and on the answer https://stackoverflow.com/a/62977299/ provided by the user 'Robert Cooper' ( https://stackoverflow.com/u/8360496/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Graphql query logs a number in console

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the GraphQL Query Logging Issue in Gatsby

When developing applications with Gatsby and the Strapi toolchain, you might encounter peculiar behavior when attempting to log your GraphQL query. It can be frustrating when the intended output isn’t what you expect. This post will clarify why you see a seemingly random number logged in your console and how to correctly view your GraphQL query results.

The Problem

You’ve integrated Gatsby with Strapi and created a GraphQL query to fetch data. While the query executes perfectly in the GraphQL dashboard, logging the query data in your console only outputs a numeric value:

[[See Video to Reveal this Text or Code Snippet]]

You might be wondering: What does that number mean? Why is my query outputting incorrectly?

The Cause of the Issue

Upon inspecting your implementation, it appears that you’re logging the pageQuery variable directly. In Gatsby, this variable is a tagged template literal, and the Gatsby internals convert this to a number for their internal processing. As a result, logging pageQuery will not yield the expected output.

Key Points:

Gatsby's internal handling: The GraphQL tagged template literal doesn’t output the expected JSON representation of the data.

Number Logged: The number you see is likely an internal representation or identifier, not your actual query result.

The Solution

To correctly log the data retrieved from your GraphQL query, you should instead log the data prop that is passed to your component.

Here’s how you can modify your code:

Step-by-Step Instructions:

Modify the Component: Change the console log to target the data prop instead of pageQuery.

[[See Video to Reveal this Text or Code Snippet]]

Understand the Output: Now when you run your app and check the console, you should see the full output of the fetched data, looking similar to this:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following these steps, you can effectively troubleshoot and resolve the issue of the unexpected number being logged in your console. Remember, logging the data prop will always give you the results of your query, allowing you to inspect and verify the data being fetched from Strapi.

Now you can continue developing your application with full visibility of the GraphQL queries’ results.