I successfully ran a query but {{ query.data }} is null

TLDR: make sure your query is saved. and if your query is "manually triggered", you have to manually trigger it.
When you first write your query and click the big blue "Preview" button, you can end up with something like this:

The data is there, but {{ query1.data }} is null!
The problem here is that "preview" doesn't affect the canvas. it only shows you the results in the query editor.
You have to save the query for the canvas to update.

But sometimes, even after saving, the canvas is still not updated!

This might happen if your query is set to "manually triggered"

If it's manually triggered, you have two options. Option 1 is to change it "run automatically":

The other option is, you leave it as manually triggered, but then you need to trigger the query yourself thru the canvas. One easy way is by adding a button that triggers the query: