Using dstore in EsriJS

One of the libraries included with the ArcGIS API for JavaScript is dstore. I talked about using dstore with your custom dijits not too long ago, but I felt like a little more ground could be covered here.

I haven’t really seen people taking advantage of the power that dstore can bring to your application, in particular if you are working with some third-party APIs to integrate into your application.

Let’s get serious here.

I’m going to go ahead and use JSONPlaceholder to demonstrate how to use dstore for API requests.

Assume you want to work with a users endpoint. Now since you are already using the ArcGIS JS API, you’ll want to stick with using esri/request for API calls. It handles proxy and CORS stuff as needed, so it’s usually a good idea to stick with it. Let’s wrap up the users API with dstore using esri/request.

gist

We’re actually going to kind of mimic the Rest Store included with dstore, but using esri/request.

We have a get method that works on the ids used in the API and a fetch method that simply returns all results. What’s that queryLog business all about? Well that is used for when you apply a filter to your request. This is a pretty powerful feature of dstore. Let’s see what this might look like.

gist

What you do is create a new filter and you can apply the query functions to it. Now you can create a Collection from the filter and fetch those filtered results.

That’s pretty cool.

But is it making a network request each time I do something? Yes, but dstore makes it very easy to create mixins for your stores that alleviate this. You can mixin your store with the Cache or LocalDB Store cache query results or persist them across browser sessions.

This is pretty simple to do.

gist

Voila, you have an awesome cached API store using esri/request that you can use to integrate third-party APIs into your application.

Here is a sample of that in action, you can see results in your browser debug console. JS Bin on jsbin.com

So take a crack it and check out how you might be able to use dstore in your own application. It’s a pretty powerful library with lots of useful features that I’m still experimenting with.