Vue Tabular data : GraphQL Query

[soroush (Soroush Garivani)]

Hi,
Following this tutorial to create a web-based tabular data visualisation, with the following object / data structure and I have two questions:

1. What could I write in “select” input to visualize “material” values?
   Leaving the field totally empty will visualize all the headers where I can see the material:
   

   
   
   However using “material” in select returns no value, and “@material” produces an error.

2. Is it possible to retrieve the material values from the very Base object directly?

Would be great if you can point out some hints or documents to answer my doubts.
Please let me know if the questions are not clear.
Thanks,

[dimitrie]

Hi @soroush! I think you just identified a nasty bug. I can reproduce it. It might have something to do with the query sanitisation that’s happening on the server end. Edit: see this issue i just raised for more details: Investigate queries with select clauses containing "@" in variable name · Issue #405 · specklesystems/speckle-server · GitHub

[dimitrie]

Okay @soroush, minor panic moment averted on my end (after some digging ): you just need to put your key name in qoutes, and escape them. Basically, for “@material”, your select clause would be ["\"@material\""]. I know it looks like a monkey threw a spanner in a text input field, but we’re providing raw queries here; ideally we’d build a “query builder” to generate those correctly (part 2 of that tutorial maybe?).

[soroush (Soroush Garivani)]

Hi @dimitrie! Oh that kind of makes sense and works well! thanks a lot for checking this.
If I may add a follow up hint ! To make this loading from HelloWorld.vue code, you’d need to use \\ instead of \ !

ie: select: '["id", "\\"@material\\""]'