You will often need to debug your GraphQL queries in order to detect errors or successful fetches.

ScandiPWA provides insightful information about each request in the browser’s console, where it logs all GraphQL queries along with it’s variables and etc.

<aside> ℹ️ You can directly access the console via the shortcut Ctrl + Shift + i.

</aside>

Then, you can filter the logs by the keyword Graphql

Untitled

The logs are sorted in the order as in the network tab:

Peek 2023-01-12 13-32.gif

You can copy the query itself and the variables object and place them in Insomnia to debug.

What are some common errors while debugging?

Common error 1:

”Field \"xxx\" of type \"[xxx]\" must have a sub selection”

Common error 2:

Type Error occurred when creating object: …\\Interceptor, Too few arguments to function …\\SomeResolver::__construct(), n passed in …/Interceptor.php on line x and exactly m expected