Fetching & Displaying an API Request using 'Fetch'

Question

I'm currently in the process of calling an API endpoint and trying to display the data relating to it. But I'm having a bit of trouble using 'Guzzle/Fetch' in this scenario. I have the following code but it seems to be outputting nothing at all. (Plugin is all installed)

Template.html

{% set client = {
    base_uri : 'https://api.tickets.com/rest/v2/Events/2704/Reviews?order=1&count=30',
    timeout : 10
} %}

{% set options = {
    headers: new Headers({
      'Content-Type': 'application/json',
      'apiKey': 'aaabbbcccdddeee',
    })
} %}

{% set request = fetch(client, 'GET', options) %}

{% echo $request->getReasonPhrase(); %}

Answer 1

So there are two things wrong with your code snippet.

First off, the fetch() method takes four parameters in the following order: client, method, destination, and options. In your example above, you're passing your options object in as the destination (because that is the third parameter), which is not going to work.

So you'll want to do something like the following instead:

{% set client = {
    base_uri : 'https://api.tickets.com',
    timeout : 10
} %}

{% set destination = 'rest/v2/Events/2704/Reviews?order=1&count=30' %}

{% set options = {
    headers: {
        'Content-Type': 'application/json',
        'apiKey': 'aaabbbcccdddeee',
    }
} %}

{% set request = fetch(client, 'GET', destination, options) %}

We've made the client.base_uri actually the Base URI (by removing the segments and query strings) and moved those to a separate variable (which is technically where they belong). This allows us to now have four parameters that we're passing into fetch() in the right order (notice our options object is now the fourth parameter like it should be).

In addition, it should be headers: {, not headers: new Headers({ in your options hash. headers: new Headers({ is not valid Twig. Not sure where you got the new Headers() from but a simple hash should work well (similar to the PHP example in the Guzzle docs).

---

Your second issue (and this is the bigger one) is this:

{% echo $request->getReasonPhrase(); %}

That is not proper Twig at all. Looks like you grabbed a bit of PHP code from somewhere and popped it inside {% ... %}, which is never going to work.

If you take a look at the Fetch README, it shows you what a response is going to look like:

{
    "statusCode":200,
    "reason":"OK",
    "body": {
        "credits_left":30,
        "test_id":"JDHFbrt7",
        "poll_state_url":"https:\/\/gtmetrix.com\/api\/0.1\/test\/JDHFbrt7"
    }
}

What this snippet means is after you run {% set request = fetch(...) %}, the request variable is now going to equal a Twig object (more properly known as a hash) containing the status code of the response, the reason phrase (which is basically just a description of a status code; so the corresponding reason phrase for a status code of 200 is OK, for a 404 it's going to be Not Found, etc.), and then finally the body of the response returned from the API endpoint.

You'd access these variables no differently than you would any other hash in Twig. To get the status code and/or the reason phrase, do:

{{ request.statusCode }} - {{ request.reason }}

To access any property of the request body, you would do:

{{ request.body.myProperty }}

Depending on the structure of the API response, you might have to dig down into several levels of nested hashes:

{{ request.body.oneHash.subHash.somethingElse.myProperty }}

You get the idea...

If you're not sure what the API response looks like (often times the API you're using will show you an example of what the response body will look like, so I'd look at the API docs first), you can just dump() the whole body property to see what it contains:

{{ dump(request.body) }}

---

Hopefully that helps!