Referencing a temp state value in GraphQL query transformer fails

This is a strange one: if you reference a temporary state variable in a graphql query transformer, it works fine...unless you attempt to also reference the results data in the transformer. And we have many use cases where we need to do both :slight_smile:

To try and simplify as much as possible: an app with two queries

Query 1 - Javascript

const str = 'State: ';
await ts.setValue(str);
  • Event handler = query trigger 2
  • Also checked "Keep variable references inside ..."

Query 2 - GraphQL

https://countries.trevorblades.com/

query GetBrazil {
  country(code: "BR") {
    name
    states { 
      name
    }
  }
}
  • Run query only when manually triggered

Query 2 Transformer - Causes Failure

let newDt = [];
data.country.states.forEach((el) => {
  const stringpart1 = {{ts.value}};
  const output = `${stringpart1} ${el.name}`;
  newDt.push(output);
})
return newDt;

Error Message
Could not evaluate transformer in query2: Error: Cannot read properties of null (reading 'country')

Query 2 Transformer - This Succeeds

console.log('the ts is:');
console.log({{ts.value}});
return data;

Hi @aviator22, Thanks for the helpful walkthrough! Can you also share a screenshot of the Query 2 response without the transformer? (from the left panel)

Yes, here that is

And here is the transformer:

let newDt = [];
data.country.states.forEach((el) => {
  const stringpart1 = {{ts.value}};
  const output = `${stringpart1} ${el.name}`;
  newDt.push(output);
})
return newDt;

What is really strange and telling

  • If you comment out the line const stringpart1 = {{ts.value}}; ....you still get this error
  • If you delete that line (and replace it with a benign const stringpart1 = 'test'; .....no error occurs

Conclusion
If a variable is referenced{{ }} -- even in a comment -- in this specific part of a transformer, something funky is happening. Retool seems to try and run/evaluate the transformer before the query itself even runs.

You can validate that conclusion I made by running a transformer with and without a variable in it. And as I noted above the variable doesn't need to be in the forEach, it can even be in a // comment. If a variable exists, you'll get this behavior.

Transformer A

let newDt = [];
console.log('the transformer ran');
data.country.states.forEach((el) => {
  const stringpart1 = 'test';
  const output = `${stringpart1} ${el.name}`;
  newDt.push(output);
})
return newDt;

Transformer B

let newDt = [];
console.log('the transformer ran');
data.country.states.forEach((el) => {
  const stringpart1 = {{ts.value}};
  const output = `${stringpart1} ${el.name}`;
  newDt.push(output);
})
return newDt;

Transformer B console logs "the transformer ran" twice, whereas Transformer A only console logs that once.