I am trying to contact a GraphQL API and retrieve the data in Flutter
I have a working call in postman giving me the data back.
I have been referred to an example of a working http call but can't get the body to work. I used an encoded version in my postman call but have been advised to un-encode the "data-raw" of my Postman call and pass Json into the query.
I have the main query and then the variable which is the lat/long
A) Is this the correct approach, using pure Json as opposed to encoded like in my postman call (Example below)
{"query":"query ($lat: Float!, $lng: Float!) {\n vehicles(lat: $lat, lng: $lng) {\n id\n...
B) How can I get the query and variable into the Map data = if this is the correct thing to do?
Here is where I am at, using un-encoded Json in Map data = which isn't being accepted and the $lat $long aren't transferred into query from variables
Future<http.Response> showMicroMob () async {
var url ='https://flow-api.fluctuo.com/v1?access_token=my_token';
Map data = {
'query': query ($lat: Float!, $lng: Float!) {
vehicles (lat: $lat, lng: $lng) {
id
type
publicId
provider {
slug
}
lat
lng
propulsion
battery
attributes
... on Station {
isVirtual
availableVehicles
availableStands
stationVehicleDetails {
vehicleType
propulsion
availableVehicles
}
vehicles {
id
publicId
type
propulsion
battery
}
}
}
}
'variables': {"lat":51.492591,"lng":-0.157221}
};
//encode Map to JSON
var body = json.encode(data);
var response = await http.post(Uri.parse(url),
headers: {"Content-Type": "application/json"},
body: body
);
print("${response.statusCode}");
print("${response.body}");
return response;
}
Original example
Future<http.Response> postRequest () async {
var url ='https://pae.ipportalegre.pt/testes2/wsjson/api/app/ws-authenticate';
Map data = {
'apikey': '12345678901234567890'
}
//encode Map to JSON
var body = json.encode(data);
var response = await http.post(url,
headers: {"Content-Type": "application/json"},
body: body
);
print("${response.statusCode}");
print("${response.body}");
return response;
}
Update of call
If I shift variable up to make a complete String it no longer recognises the $lat $long fields or the actual lat/long numbers as values and makes them orange text. When I move variables down like in my postman request it of course throws errors, but the numbers are recognised as such ($Lat/$Long still not able to take the value. Tried just hard placing lat/ling figures in and returned
flutter: 400 flutter: Bad Request
Should I try passing the variables in another way?
Future<http.Response> showMicroMob () async {
var url ='https://flow-api.fluctuo.com/v1?access_token=x';
var response = await http.post(Uri.parse(url),
headers: {"Content-Type": "application/json"},
body: utf8.encode(r'{"query":"query ($lat: Float!, $lng: Float!) {\n vehicles(lat: $lat, lng: $lng) {\n id\n lat\n lng\n type\n publicId\n attributes\n propulsion\n battery\n provider {\n name\n slug\n website\n discountCode\n app {\n android\n ios\n __typename\n }\n deepLink {\n android\n ios\n __typename\n }\n stationVehicleTypes\n __typename\n }\n pricing {\n currency\n unlock\n perKm {\n start\n interval\n price\n __typename\n }\n perMin {\n start\n interval\n price\n __typename\n }\n perMinPause {\n start\n interval\n price\n __typename\n }\n includeVat\n __typename\n }\n ... on Station {\n availableVehicles\n availableStands\n isVirtual\n stationVehicleDetails {\n vehicleType\n propulsion\n availableVehicles\n __typename\n }\n __typename\n }\n ... on Car {\n carClass\n carModel\n __typename\n }\n __typename\n }\n}\n"
,"variables":{"lat":51.492591,"lng":-0.157221}}'));
print("${response.statusCode}");
print("${response.body}");
return response;
}
CodePudding user response：
You had a bunch of typos in your raw string. The following works, and answers your earlier question about how to build via JSON (as an alternative).
import 'dart:convert';
import 'package:http/http.dart' as http;
void main() async {
{
var url = 'https://flow-api.fluctuo.com/v1'
'?access_token=eOy6L54RIbbswB8O0gQgk3lChcCu2wco';
final encodedQuery1 = r'''{
"query": "query ($lat: Float!, $lng: Float!) {vehicles(lat: $lat, lng: $lng) { id lat lng type publicId attributes propulsion battery provider { name slug website discountCode app { android ios __typename } deepLink { android ios __typename } stationVehicleTypes __typename } pricing { currency unlock perKm { start interval price __typename } perMin { start interval price __typename } perMinPause { start interval price __typename } includeVat __typename } ... on Station { availableVehicles availableStands isVirtual stationVehicleDetails { vehicleType propulsion availableVehicles __typename } __typename } ... on Car { carClass carModel __typename } __typename }} ",
"variables": {
"lat": 51.492591,
"lng": -0.157221
}
}
''';
// ALTERNATIVE way to build the json
final lat = 51.492591;
final long = -0.157221;
final gqlQuery =
r'query ($lat: Float!, $lng: Float!) {vehicles(lat: $lat, lng: $lng) { id lat lng type publicId attributes propulsion battery provider { name slug website discountCode app { android ios __typename } deepLink { android ios __typename } stationVehicleTypes __typename } pricing { currency unlock perKm { start interval price __typename } perMin { start interval price __typename } perMinPause { start interval price __typename } includeVat __typename } ... on Station { availableVehicles availableStands isVirtual stationVehicleDetails { vehicleType propulsion availableVehicles __typename } __typename } ... on Car { carClass carModel __typename } __typename }}';
final encodedQuery2 = json.encode({
'query': gqlQuery,
'variables': {'lat': lat, 'lng': long},
});
// END of alternative
var response = await http.post(
Uri.parse(url),
headers: {'Content-Type': 'application/json'},
body: utf8.encode(encodedQuery1), // to use the alternative replace 1 w/ 2
);
print('${response.statusCode}');
print('${response.body}');
}
}
CodePudding user response：
copy your response and past it on quicktype.io. quicktype will give you a model class.