Adding JSON to REST API Data Source Configurations?

Hi,

I’m having trouble understanding how to configure a new REST API data source so that I can pass required information (e.g. API key) in my requests.

The API’s documentation is pretty minimal:

Takes
URLEncoded

  • apiKey: Your api key
  • spaceId: Id of the space for the map you want to get the contents of
  • mapId: Id of the map within the space

I found an example of a code snippet from the developers, which contains a GET request that looks like this:

  axios.get('https://[website.com]/api/getMap', {
    params: {
      apiKey: API_KEY,
      spaceId: ROOM_ID,
      mapId: MAP_ID,
    }

However I really don’t understand how that translates to AppGyver’s Data Configurator when setting up a data source. I have tried setting “params” equal to a JSON-esque string, like "{“apiKey”: “mykey”}, and setting individual parameters by name (e.g. “apiKey”) – and I tried this in the URL Placeholders section, and then in the Query Parameters section – but when I try a Run Test, nothing seems to work. (“Error: TypeError: Failed to fetch. Does the server allow CORS?status: undefined”)

Here’s an example of a thing I tried that seemed like it should have worked:

Here are some more specific questions in case that will help clarify my issue:

  1. What is the difference between a parameter added to the URL via the URL Placeholders part of the Data Configurator (e.g. “https://[website.com]/api/getMap?params={params}”), vs. defining “params” in the Query Parameters section?
  2. How do I add a JSON request parameter in a way that’s equivalent to what the code snippet is doing with the axios.get command?
  3. Per the documentation, when I make a POST request I will need to put a JSON object in the request body. Is that a different process than adding it as a param, and if so how do I go about it?

Also if I’m not asking the right questions, feel free to correct me!

Thanks for your help,
~Ethan

UPDATE to this:

After much troubleshooting, it turns out that the server IS sending a response when I include the required info under Query Parameters. It’s in the form of a very large JSON object with all the info I need. I can open the file via the Network tab in my Chrome Developer Tools. Why is AppGyver telling me it’s an error, and is there any way to massage it into a format that Appgyver can recognize?

Second update:

I tried working around this with an HTTP Request logic block, but it looks like I’m getting the same error that happysutra got in this thread:

Access to fetch at ‘[web site]’ from origin ‘https://preview-legend.appgyver.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Am I understanding correctly from @Harri_Sarsa’s answers to the above thread that there is no way for me to make these requests via a web app unless the host implements CORS in their API, even if I am running the app from my own site, because it’s the browser itself that’s treating the host response as suspicious?

I’m finding this especially frustrating because in the Network tab of Developer Tools I can see and access the JSON response from the host, so I’m obviously getting the information I need via the API, but I just can’t figure out how to get the app to recognize that. :face_with_head_bandage:

Hey @escapenewhaven, sorry about the delayed answer! Are you still having this issue?

I noticed that the error you are getting says that the status is undefined, which means that either you are not getting response.ok AND you are not getting status code from the API, or the whole request fails somehow.

You said that you can see the response in the developer console, which excludes the latter option. So what I’d like you to do is, to see if the response includes fields ok and status. Or is it just the response data you are seeing in the console?

Thanks! :slight_smile:

I don’t think there is any difference other than convenience.

It depends on how the API_KEY, ROOM_ID and MAP_ID are taken in, in the axios code. It should be mentioned in the documentation, if they are taken in, with the params, then you use the ?param=param notation, and if they are taken in with the request body, then it you need to send them in the request body. (how to in next section)

You can add request body to POST, PUT and DELETE request from the schema-tab in the data resource configurations page. You need to select the “Custom schema” option from the Request body dropdown menu, and then you can add properties to that, as you would in the variables tab. After you have created the properties, you can access/add them to your request from the “Record properties” custom object property. It can be found from the test page (if the custom request body is defined) and from ´Create record, Delete recordandUpdate record` depending on which ones you have defined in the data configuration.

I hope these answer your questions! :slight_smile:

Thank you! Your responses are really helpful in me understanding the nomenclature of these requests & the data configurator (query, params, body). I am just seeing the response data in the console, and I believe the host has not implemented CORS in their API.