I have a graphQL backend for my app. It's been a challenge using FlutterFlow's API Calls system, and here's one of the biggest issues I've encountered.
Take this example query (and forgive the one-liner mutation; that's required):
{
"query": "mutation PersonCreate($firstName: String!, $lastName: String!, $enableAppLogin: Boolean, $email: String, $phone: String) { personCreate( input: { firstName: $firstName, lastName: $lastName, enableAppLogin: $enableAppLogin, email: $email, phone: $phone, } ) { firstName lastName id } }",
"variables": {
"firstName": <firstName>,
"lastName": <lastName>,
"enableAppLogin": <enableAppLogin>,
"email": <email>,
"phone": <phone>
}
}
Variable Repetition
The most obvious issue is the repetition of each identifier. In the above, firstName
shows up six times!
AFAIK, best practice is to use variables for type safety and static queries in general for performance. However, using variables in Flutterflow means:
1. Define a variable at the API call level
2. Add the FlutterFlow variable to the "variables"
block in JSON to translate to a GraphQL variable
3. Add the GraphQL variable from the JSON block to the variable definition in the operation name (PersonCreate
above)
4. Add it to the mutation/query argument
5. Repeat for every variable, for every query.
This gets really painful not in just initially defining the query, but especially when relating it back to the API call action defined in the main flutterflow canvas. There's so many layers, and each one could cause an issue!
Conditional Fields
It's painful, but I can work around the above. This next part I don't know how to work around: it doesn't seem possible to conditionally include fields while using variables
.
In the above query, fistName
and lastName
are required, but email
and phone
are not. Unless I'm missing something, there's no clean way to conditionally add those to either the query
or variable
blocks in the JSON above.
If even optional fields must be included, we could set them to null
and have the backend handle that payload. However, if my backend ignores fields with null values, what happens when I want to set a field to null
? That seems like a non-starter.
So, there is a kludgy way to optionally include the fields. I have a custom function:
String optionalGraphQlField(
String field,
String? value,
) {
/// MODIFY CODE ONLY BELOW THIS LINE
if (value == null) {
return '';
}
if (value == "null") { // assuming this was unintentional null form of string
print(
"WARNING! stringified \"null\" passed in to escapeString custom function.");
return '';
}
return " " + field + ": \"" + value + "\"";
/// MODIFY CODE ONLY ABOVE THIS LINE
}
which I've had to wrap every optional field of every API call with. It means I can't use the "variables"
block in the query JSON and define each optional field in step 4 above.
I know native GraphQL support has been talked about. How high up is it in the priority list? Is there a way to push it higher if it's lower down? This is a painful experience!