loading...

Using Graph Explorer to Get Sample Data via REST

toddanglin profile image Todd Anglin ・3 min read

Here's the scenario: you've got an idea for an app that includes data from Microsoft's Graph API. You want to mock up the concept using dummy data from Graph API, and you don't want to jump through hoops writing "real code" around authentication.

What do you do?

Graph Explorer to the rescue

For the unfamiliar, Graph Explorer is a browser-based tool that makes it easy to...well, explore the vast capabilities of the Graph API. You can sign in to Graph Explorer to see your own data as you explore, or you can browse anonymously and get sample dummy data.

And really, if you work at a company that uses M365 (and most of us do) and you have not yet explored Graph API, do yourself a favor and check it out today. Much like social graphs do for consumer applications, Graph API puts tons of valuable information about your organization right at your developer finger tips. You are one REST call away from listing the members of your team or displaying a contact card in your app powered by the M365 directory. But I digress.

Graph Explorer. Dummy data. Your app concept.

Graph Explorer provides sample data when making anonymous requests to Graph API endpoints. For example, if we call this endpoint in Graph Explorer anonymously: https://graph.microsoft.com/v1.0/me/photo/$value. We get this image:
Image of a woman's face

Easy peasy.

But if we take that same REST endpoint and try to access the sample data outside of Graph Explorer, we'll be met with a 401: Unauthorized error.

Accessing Graph Explorer sample data via REST

The solution to our problem lies in the API proxy that Graph Explorer uses in the browser. Inspecting network traffic for a Graph Explorer request reveals all calls go through a sandbox proxy:

https://proxy.apisandbox.msdn.microsoft.com/svc

The Graph API endpoint is passed as a URL encoded query string value. In the case of the profile photo endpoint:

?url=https:%2F%2Fgraph.microsoft.com%2Fv1.0%2Fme%2Fphoto%2F$value

The request will still fail, however, until you add the following HTTP header to your request (exactly as-is...no need to change the token value):

Authorization: Bearer {token:https://graph.microsoft.com/}

And, whala!✨ Graph Explorer sample data via REST!

Try it out with this interactive sample on JSBin

Get your own sample data

Using Graph Explorer's sample data is a convenient, quick-and-dirty solution for a design mockup or simple demo, but eventually you'll likely want more control over your sample data...and a place where you can test your app with Graph integration before deploying. And for that, you you'll want your own M365 sandbox!

Creating a M365 developer sandbox is free and easy:

  1. Visit the M365 Developer Program page
  2. Sign-up for free
  3. Create your personal M365 sandbox

This gives you a sandbox URL, sandbox domain, and sandbox admin user account you can use to configure and play with M365 (and Graph) to your heart's content. Microsoft even provides sample data packs that add useful demo data to your environment with a single click (like additional sample users and profiles).

M365 sample data packs

Now, when you authenticate using your sandbox account, you will see your personal sandbox data in Graph Explorer (or anywhere you access the Graph API). This is useful for any M365 demo where you don't want to expose the "real" data from your organization.

There you have it. A quick and easy way to grab Graph Explorer sample data, and a more robust path for creating a M365 developer sandbox.

Posted on by:

toddanglin profile

Todd Anglin

@toddanglin

Web and mobile front ender at heart. Know just enough to be dangerous.

Discussion

pic
Editor guide