Creating A “Starred” Feed | CSS-Methods

It’s a bit totally different. For one, I’m solely fetching 10 gadgets at a time. We may push that to infinity however that comes with a efficiency tax, to not point out I’ve no means of organizing the gadgets for them to be grouped and filtered. Possibly that’ll be a future enhancement!

The Chris demo offered the bones and it does many of the heavy lifting. The “powerful” elements have been square-pegging the factor right into a WordPress block structure after which getting transients going. That is my first time working with transients, so I believed I’d share the related code and choose it aside.

perform fetch_and_store_data() {
  $transient_key = 'fetched_data';
  $cached_data = get_transient($transient_key);

  if ($cached_data) {
    return new WP_REST_Response($cached_data, 200);
  }

  $response = wp_remote_get('https://feedbin.com/starred/a22c4101980b055d688e90512b083e8d.xml');
  if (is_wp_error($response)) {
    return new WP_REST_Response('Error fetching information', 500);
  }

  $physique = wp_remote_retrieve_body($response);
  $information = simplexml_load_string($physique, 'SimpleXMLElement', LIBXML_NOCDATA);
  $json_data = json_encode($information);
  $array_data = json_decode($json_data, true);

  $gadgets = [];
  foreach ($array_data['channel']['item'] as $merchandise) {
    $gadgets[] = [
      'title' => $item['title'],
      'hyperlink' => $merchandise['link'],
      'pubDate' => $merchandise['pubDate'],
      'description' => $merchandise['description'],
    ];
  }

  set_transient($transient_key, $gadgets, 12 * HOUR_IN_SECONDS);

  return new WP_REST_Response($gadgets, 200);
}

add_action('rest_api_init', perform () {
  register_rest_route('customized/v1', '/fetch-data', [
    'methods' => 'GET',
    'callback' => 'fetch_and_store_data',
  ]);
});

Might this be refactored and written extra effectively? All indicators level to sure. However right here’s how I grokked it:

perform fetch_and_store_data() {

}

The perform’s identify might be something. Naming is tough. The primary two variables:

$transient_key = 'fetched_data';
$cached_data = get_transient($transient_key);

The $transient_key is solely a reputation that identifies the transient after we set it and get it. In actual fact, the $cached_data is the getter in order that half’s executed. Examine!

I solely need the $cached_data if it exists, so there’s a examine for that:

if ($cached_data) {
  return new WP_REST_Response($cached_data, 200);
}

This additionally establishes a brand new response from the WordPress REST API, which is the place the information is cached. Slightly than pull the information straight from Feedbin, I’m pulling it and caching it within the REST API. This fashion, CORS is now not a difficulty being that the starred gadgets are actually domestically saved by myself area. That’s the place the wp_remote_get() perform is available in to type that response from Feedbin because the origin:

$response = wp_remote_get('https://feedbin.com/starred/a22c4101980b055d688e90512b083e8d.xml');

Equally, I made a decision to throw an error if there’s no $response. Which means there’s no freshly $cached_data and that’s one thing I wish to know instantly.

if (is_wp_error($response)) {
  return new WP_REST_Response('Error fetching information', 500);
}

The majority of the work is merely parsing the XML information I get again from Feedbin to JSON. This scours the XML and loops via every merchandise to get its title, hyperlink, publish date, and outline:

$physique = wp_remote_retrieve_body($response);
$information = simplexml_load_string($physique, 'SimpleXMLElement', LIBXML_NOCDATA);
$json_data = json_encode($information);
$array_data = json_decode($json_data, true);

$gadgets = [];
foreach ($array_data['channel']['item'] as $merchandise) {
  $gadgets[] = [
    'title' => $item['title'],
    'hyperlink' => $merchandise['link'],
    'pubDate' => $merchandise['pubDate'],
    'description' => $merchandise['description'],
  ];
}

“Description” is a loaded time period. It may very well be the total physique of a submit or an excerpt — we don’t know till we get it! So, I’m splicing and trimming it within the block’s Edit element to stub it at not more than 50 phrases. There’s a bit danger there as a result of I’m rendering the HTML I get again from the API. Safety, sure. However there’s additionally the possibility I render an open tag with out its closing counterpart, muffing up my format. I do know there are libraries to deal with that however I’m retaining issues easy for now.

Now it’s time to set the transient as soon as issues have been fetched and parsed:

set_transient($transient_key, $gadgets, 12 * HOUR_IN_SECONDS);

The WordPress docs are nice at explaining the set_transient() perform. It takes three arguments, the primary being the $transient_key that was named earlier to establish which transient is getting set. The opposite two:

• $worth: That is the thing we’re storing within the named transient. That’s the $gadgets object dealing with all of the parsing.
• $expiration: How lengthy ought to this transient final? It wouldn’t be transient if it lingered round eternally, so we set an period of time expressed in seconds. Mine lingers for 12 hours earlier than it expires after which updates the following time a customer hits the web page.

OK, time to return the gadgets from the REST API as a brand new response:

return new WP_REST_Response($gadgets, 200);

That’s it! Properly, not less than for setting and getting the transient. The subsequent factor I noticed I wanted was a customized REST API endpoint to name the information. I actually needed to lean on the WordPress docs to get this going:

add_action('rest_api_init', perform () {
  register_rest_route('customized/v1', '/fetch-data', [
    'methods' => 'GET',
    'callback' => 'fetch_and_store_data',
  ]);
});

That’s the place I struggled most and felt like this all took wayyyyy an excessive amount of time. Properly, that and sparring with the block itself. I discover it tremendous arduous to get the back and front finish elements to sync up and, truthfully, numerous that code seems to be tremendous redundant in case you have been to scope it out. That’s one other story altogether.

Get pleasure from studying what we’re studying! I put a web page collectively that pulls within the 10 most up-to-date gadgets with a hyperlink to subscribe to the total feed.