Multiple queries in Sanity with one request

Sanity has a powerful query language called GROQ. This gives us a lot of possibilities to filter our data and get exactly what we need in our frontend. Often we can write queries like this:

// Fetch first 3 posts
var posts = client.fetch("*[_type == 'post'][0...3]");

But what if we have a website with content that needs to be fetched for every page, in addition to our original query? In addition to the query above we could add another query:

// Fetch first sitesettings schema
var sitesettings = client.fetch("*[_type == 'sitesettings'][0]");

While this works fine, we have to use two API calls to get our data. For smaller sites this might be ok. But if we need to minimize our API calls, we could build our query and fetch all the data in one go. To achieve this we wrap both our queries in one object. Something like this:

var postsAndSitesettings = client.fetch("
{
	'sitesettings': *[_type == 'sitesettings'][0],
    'posts': *[_type == 'post'][0...3]
}
");

Now our new object postAndSitesettings contains all the data we need.