From the community: Use All Five creates the Angular Contentful Service, a simple wrapper for contentful.js

When you’re building multiple projects with a particular framework or tool, it can be easy to find yourself in a monotonous rut—copying and pasting the same code and configuration from project to project.

This is exactly the situation that Use All Five, an LA-based studio with noteworthy clients like Google or Headspace, found themselves in.

They were building a lot of Angular websites powered by Contentful, so it made sense to have tooling to expedite the initial setup process. And that’s how the Angular Contentful Service (ACS) came about.

“Angular Contentful Service is a really simple wrapper for contentful.js,” Bret Morris explains. Bret is the Director of Technology at Use All Five and started using Contentful about three years ago. “We decided to take some time to create a public library that would help developers (including ourselves) get Contentful up and running a little more quickly on Angular projects.”

ACS provides developers with a straightforward way to configure contentful.js by allowing them to do so right in the main Angular module. And as they say in their README, this makes life “just a bit easier.”

While it is a simple library, one of the nicest features is how ACS caches requests to the Contentful API client side.

“This means that if your app happens to call the same contentful endpoint multiple times (pretty common), ACS will serve up the cached response the second time, resulting in better performance and ultimately a better user experience,” says Bret.

An example of it can be found here:

1
2
3
4
5
6
7
8
9
public getEntries(query?: any): Promise<EntryCollection<any>> {
  let key: string;
  key = query ? JSON.stringify(query) : 'no-query';
  // Cache promise for future use
  if (!this.entries[key]) {
    this.entries[key] = this.client.getEntries(query);
  }
  return this.entries[key]; 
}

Bret explains what’s going on in the above snippet: “We’re simply converting the query object into a string and using that string as a key on a local entries object. If that key exists on the entries object, then the request has been cached, and that response is served up. Otherwise, we fetch a new response from Contentful.”

You can find the full source code, as well as installation instructions, on the ACS GitHub repo.

Because ACS is still in development, Bret and his team would love to receive some contributions from the community: “We’ve only added what we’ve used commonly on our projects, but I’m sure there are some features that we’re missing that would be really nice.”

Blog posts in your inbox

Subscribe to receive most important updates. We send emails once a month.