English versionEN

Exploring the WordPress Graph with Next.js & WPGraphQL

Colby Fayock

Helping others learn about Javascript, React, and the static web.

This ad is not shown to multipass and full ticket holders

JSNation US 2026

November 16 - 19, 2026

New York, US & Online

The main web dev conference in the US

Learn More

Bookmark

Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance.

With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.

We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web.

Slides & more

This talk has been presented at GraphQL Galaxy 2021, check out the latest edition of this Tech Conference.

FAQ

According to Build With Trends, 37% of the top one million websites use WordPress.

A headless WordPress setup uses WordPress for content management while serving the front-end through a different framework or static site generator. This allows for faster page loads and better scalability.

In a traditional WordPress setup, the browser requests a page, the server then fetches data from the database, renders it into HTML, and sends it back to the browser.

Using a static site generator with WordPress can improve page load times, reduce server load, and increase scalability. This is because the site is pre-rendered into static HTML files, which are served directly from storage or a CDN.

WPGraphQL is a WordPress plugin that allows you to query your WordPress data using GraphQL, enabling more efficient and flexible data retrieval.

To install WPGraphQL, go to the WordPress dashboard, navigate to Plugins > Add New, search for 'WPGraphQL,' install, and activate it.

WPGraphQL does not natively support WordPress blocks created with Gutenberg, but there are plugins that can help by scraping the content.

GraphQL allows you to request only the data you need, reducing the amount of data transferred. This can result in fewer network requests and faster load times compared to REST APIs, which may return larger data sets.

Yes, WordPress can work with modern development architectures, including headless setups and integration with frameworks like Next.js, especially when using WPGraphQL for data management.

The Next.js WordPress Starter is an open-source project that allows you to quickly set up a WordPress site with Next.js, leveraging WPGraphQL for data queries.

headless cms graphql wordpress headless

Colby Fayock

23 min

09 Dec, 2021

Comments

Video Summary and Transcription

WordPress is widely used, and it now supports a REST API for headless usage. Serving static HTML files allows for infinite scaling and surviving viral traffic. GraphQL can be used to interface with WordPress data, reducing complexity. WordPress can be coupled with plugins like Yoast and ACF, and WPGraphQL works seamlessly with these plugins. GraphQL allows for selecting only necessary data and has performance advantages over REST APIs.

Available in Español: Explorando el Gráfico de WordPress con Next.js y WPGraphQL

1. Introduction to WordPress and Headless CMS

Short description:

WordPress is still widely used, with 37% of the top one million sites using it. It now supports a REST API, allowing for headless usage. Static site generators and modern web frameworks can do the heavy lifting before the page loads, avoiding the need for client-side requests to WordPress.

B-R-E-A-C-K-E-R-Y-S-T-Y-F-R-O-K-K-Y-S-T-Y-F-R-O-K-K-Y-S-T-Y-F-R-O-K-K-Y-S-T-Y-F-R-O-K-K-Y-S-T-Y-F-R-O-K-K-Y-S-T-Y-F-R-O-K-K-Y-S-T-Y-F-R-O-K-K-Y-S-T-Y-F-R-O-K-K-Y-S-T-Y-F-R-O-K-K-Y-S-T-Y-F-R-O-K-K-Y-S-T-Y-F-R-O-K-K-Y-S-T-Y-F

You can pretty much find me anywhere on the web by just Googling my name, as I'm the only one in the world. So let's start off by addressing the CMS in the room. It's 2021, and some developers would still cringe at the thought of using WordPress. But frankly, we're still living in a WordPress world. According to Build With Trends a little bit ago, if we look at the CMS distribution of the top one million sites, 37% of websites are using WordPress. That's a huge percentage. And I'm sure it's gonna have gone up by now, and I'm not quite sure how accurate it is, but if you look at the number of detections on the Build With site, it's over 960 million installs of WordPress. That's almost one billion. That's a staggering number.

While we might not all want to use WordPress, it's realistically around to stay for the foreseeable future. But hold up, why am I even talking about WordPress? Well, jumping back a bit, WordPress, as we traditionally know it, is an all-in-one CMS and website solution. It works side to grab all the data from the database, render it to HTML, and then send it over to the browser. But since 4.7, WordPress now supports a REST API. This means right out of the box we actually can use WordPress headlessly. If you haven't heard of the term headless before, what does that actually mean? Well, with our traditional stack like WordPress, somebody will visit a page in the browser. The browser reaches out to the server, the server will do the work like make those requests to the database, render the HTML for the page, and then send that response. If we're lucky, it'll return it cached. Finally, the browser will display that response to the person who's visiting that site. With a headless approach, that request to the server might be asynchronous on the client. In this particular example, the person would visit a page in their browser and immediately get a response straight from storage. Once that page loads inside of the browser, the browser will kick off another request to a server which can load all of that dynamic content. But I would imagine you probably wondering why would we want to make a client-side request to WordPress for a CMS? That's not necessarily the recommended approach. That's where static site generators and modern web frameworks come in. They do all the hard lifting before the page actually hits the browser. We can use front-end frameworks to get all that data at compile time or with server-side rendering, avoiding that cost inside of the browser. Now, if this all sounds new to you, it might sound like a lot of work. Why not even, why even bother with an API? Why not use WordPress out of the box like we always do? So let's focus on this example of using an API with a static site, where the only time we reach out to that API is at compile time. And we store the HTML files directly in storage. We get a lot of benefits from actually avoiding hitting the server directly on each of those requests. With most of our base solutions, server-based solutions like WordPress, there's a lot of options to help speed things up.

2. WordPress and Headless CMS

Short description:

WordPress plugins and custom work can help with caching, but each page is still a server hit. Static HTML files, served from storage or a CDN, are faster. Load balancing and auto scaling are not perfect solutions. Serving static HTML files allows for infinite scaling and surviving viral traffic. Storage is cheap, and managing servers can be costly. The REST API in WordPress allows for fetching all data, including blog posts and author information.

For WordPress specifically, that includes some plugins to cache or some custom work under the hood, but each page is still a server hit, which is still prone to its ups and downs. On the other hand, with our statically compiled site, a static HTML file is just going to be fast. Instead of spending time rendering on a server, you serve a static file straight from storage or a CDN. While you can do this by default with WordPress, it's often much more complicated. And some of the plugins that cache might serve an HTML file, but they still serve it from a regular server, not static storage.

With any server, we're typically paying for how much we expect our traffic to be. While most of the time that is predictable, we all hope to one day have a viral post, and if that happens, the people visiting our site will be the ones paying for it with slow speeds or timeouts. There are solutions like load balancing and auto scaling, but those aren't perfect solutions, and we might not always be able to handle that certain traffic.

Back to the fact that we're serving static HTML files, because we're serving files straight from storage, or better yet, statically from the CDN, buzzword alert, that means our user-facing website is going to infinitely scale. That static site will survive the Reddit hug of death when your post goes viral. But managing servers isn't always cheap. While a low traffic personal blog could maybe manage a few to be a few dollars a month, the more that traffic grows, the more that cost is going to grow. While you do still have those options like load balancing and auto scaling, the services add up really quickly. Without it, you, again, risk your site slowing down, or worse, downtime. But storage is cheap. It's really cheap. We can maintain huge static projects in AWS using S3 for a really low cost. But even if we still manage a server, the usage is going to be much, much lower because we're only having to deal with content managers or requests at compile time.

Now, I hopefully convinced you as to why headless is a good thing. Or at least set up some context about what's actually coming next. So, how do I apply this to WordPress? Well, back to the REST API. If I want to start building out my new static blog, I'll ultimately need to fetch all my data. I'll start off by going to WP.json, which is going to be some basic info about my website, along with a list of routes showing what endpoints are actually available to hit. Next, I want to add my blog posts. So, I can hit the post endpoint and easily get them all. I can then simply load them up inside of my application and iterate through all of them inside of the UI. But I want to add more details to this. I want to know, for instance, who the author is. So, I find the author ID in the post, and it probably doesn't make sense to hit each, every individual author one by one, because that could be a lot of authors. So, I hit the author's endpoint, and I try to match up the data.

3. Using GraphQL to Interface with WordPress Data

Short description:

To avoid making multiple requests and dealing with complex data relationships, we can use GraphQL to interface with our WordPress data. By installing the WP GraphQL plugin, we can query our WordPress data with GraphQL, fetching only the necessary data with intact relationships. This reduces data management and complexity. When making requests in the browser, the cumulative impact of KBs and milliseconds becomes noticeable, especially on large sites. Next.js and WPGraphQL can be used together to build a beautiful WordPress blog, with the GraphiQL Explorer providing an interactive way to explore and query the data.

But now I also want to show some categories in that page. So, again, I find the IDs, but this time for the categories, and I request all categories. And, again, match up the data. Looking back at what I just did, though, I just made four separate requests to get the data that I need for the page. Luckily, in my example, I'm statically compiling so that might not necessarily end up costing the user, but that will certainly make development a bit slower.

On top of that, added complexity of managing all of that data and filtering it down so that I don't actually pass all of that data as giant arrays as props into the actual page, along with generally the extra strain on the WordPress instance for all those requests. Now, this isn't meant to shame the WordPress API, nor is it meant to say that REST is inherently bad, but we're dealing with complex relationships in our data. We don't want to be limited by individual endpoints, leaving us with long chains of requests and more data than we actually need. We want to be able to provide the best experience we can.

Now, this is GraphQL Galaxy, so I think you probably know where I'm getting at here, but we can seriously level up the way that we're interfacing with our WordPress data by using GraphQL. And to do that, thanks to Jason Ball, who created the wonderful WP GraphQL, along with all the other hardworking contributors, we can add the power of GraphQL to WordPress. We can do this by simply installing it as a plugin right inside of our dashboard, giving us the ability to query our WordPress data with GraphQL.

So before, I was talking about how I didn't like the idea of having to make all these four requests all chained together. So instead, we can load up our GraphQL client like Apollo, and we can make a single request with our query. Instead of having to manage four full dumps of data, where we need to match everything up and have complicated logic and actually avoid bloating the application, I can query for only the data that I need, with all my relationships already intact, meaning there's less data that I have to manage and far less complexity. Now, again, I'm going to do this during compile time, but we can see the realistic impact of what those requests would look like by making the request inside of the browser. While those KBs and milliseconds might not seem like a lot, it really does add up, and it becomes more noticeable inside the rendering experience. Not to mention, I don't have a lot of posts on the endpoints that I'm actually hitting here, so imagine a huge site that has a ton of posts. Also, that was on my Fast Files connection. It's a little bit different when we see what that looks like when throttling with something like Fast3G connection. The post endpoint with my small amount of posts still took three seconds, so it really starts to become a huge difference. Now, ultimately, we want to pull this into our application. We want to build that beautiful WordPress blog. So this is where Next.js comes in. Like I mentioned earlier, WPGraphQL is a WordPress plugin install away. Once that's installed, you immediately have access to all of your data. The cool thing is with GraphQL, the GraphiQL Explorer is that it's installed by default with WPGraphQL, and it lets you interactively explore all of your data. You're able to click through and see everything that you're actually able to query right inside of that dashboard, and as you're doing that in the middle column, it's actually building the exact query that you need for your app. And I've done just that with creating what I call the Next.js WordPress Starter, which lets anybody spin up a WordPress site with Next.js super easily. Like you'd typically expect from a WordPress blog, the homepage is full of the most recent posts.

4. Using getStaticProps and getStaticPaths

Short description:

I take advantage of getStaticProps to request all posts at compiler time and build the page with pagination. By using getStaticPaths, we define the routes for our posts and fetch the data again using getStaticProps. To avoid hitting the server for search functionality, I created a Webpack compiler that fetches posts at compile time and creates a static search index with titles and paths.

I take advantage of getStaticProps, where I request all those posts at compiler time. That gets injected into the page, and I can build out my page exactly how I want with all of the pagination.

Now, of course, I want to make sure that we have all of the routes for our posts, so we can take advantage of getStaticPaths, which is how we can tell Next.js exactly what paths or pages that we want to make sure get built. And once we define those paths, we can then look up the data again using getStaticProps with each of those parameters.

I would imagine someone would typically expect search as well, and the WordPress API provides search capabilities, but like I mentioned earlier, I'm trying to statically compile this, so then we would still be hitting the server, which I don't want to do here. So I took advantage of Next.js sitting on top of Webpack, and I created a Webpack compiler that fetched all the posts at compile time. It would then create a search index, a static one, with titles and paths right inside of that static file. It then loads that into memory, or it loads it asynchronously on the client, and we can make sure our search is right to that index.

5. Coupling WordPress with Plugins and WPGraphQL

Short description:

We can couple WordPress with familiar plugins like Yoast and ACF, providing flexibility in content and data management. WPGraphQL works seamlessly with these plugins, allowing for querying data relationships with a single endpoint.

The nice thing is we can couple this with all of our WordPress plugins that we are used to, like Yoast and ACF, where this gives us a lot of flexibility for how we actually manage our content and data. And these all work perfectly with WPGraphQL. So you're still querying all those data relationships with that one endpoint, with everything right intact.

So I know you all don't want to just see some screenshots of some code, so let's do a really quick walkthrough. So here's what we're going to do. We're going to first jump into an existing WordPress instance. I'm going to show you how we can simply install WPGraphQL. We'll then open up the GraphQL Explorer so we can just kind of poke around and query our data a little bit. And then finally, we're going to create a new application using an example starter that I created where we can see some existing requests and maybe tweak those requests just to see how we can pull in new data. So let's dive in.

6. Querying Data with WPGraphQL

Short description:

We're going to install the WPGraphQL plugin to query post data with GraphQL. After installing and activating the plugin, we can use the Graphical IDE page to explore and build queries in real-time. By opening the post in the query editor, we can see and add attributes such as date, ID, and title. With WPGraphQL, we can query and retrieve data for each post. We'll use a simpler example starter to demonstrate querying data in real-time and modifying the query. To get started, we'll copy the yarn create command and use create next app to clone the example project, install dependencies, and reset the git history. We'll then add an environment variable, the GraphQL endpoint for our WordPress instance, by creating a .env.local file in the project root.

All right. So we're going to get started with pretty much a fresh new WordPress instance I have from WPEngine where I have a little bit of pre-loaded content in here, including some posts and some pages, just so that we have something to actually query here. But really, the point I'm trying to make is that there's really nothing special going on in here yet. And we can even see under the plugins that we don't have any plugins installed, but our goal is to ultimately actually query all this post data with GraphQL.

So what we want to do is we want to install that WPGraphQL plugin to actually be able to do that. So the first thing I'm going to do is I'm going to click Add New under plugins. And I'm going to go to Search, and I'm going to search for WPGraphQL, which we can see that I've done before. And as soon as I make that search, we can see that right now in the first slot is that WPGraphQL plugin that I'm going to install. And then as soon as it's done, I'm going to activate it. And we can see as soon as it's activated, over in the left sidebar here, I now have this GraphQL tab. And I can even click this Graphical IDE page, where it's going to load up and we can see that we have this graphical editor.

Now, as I talked about earlier in my talk, we have the ability to actually real-time go through all of our data using this query editor. That way we can both see all the data that we have available, but we can build our query so that we can later use it inside of our application. Now, to see how this works, let's try to check out what our posts look like. So if I scroll down inside of this Explorer panel, we can see that I have my post right here, where if I start to open that up, we can then see in the middle column that it's starting to build that query in real-time. Now, let's add some data to that, where if I start opening up the edges and the node for those edges, we can now see all the attributes that I actually have for each of those posts. Where, let's grab some things that make sense, like the date, and we have our ID for each of the posts. And how about our title for the post, where now, if we click play, we can see that in this far right column, I now have all that data for each of my posts. We can see exactly what we showed over in this post page, but we now are able to query that with our WP GraphQL via GraphQL plugin. So now let's actually try to see how we can take this data and use it to build an application.

So what we're going to do to do that is, because the Next.js WordPress starter that I actually create is probably a little bit too complex for trying to walk through in this demo, I have this simpler example starter, where it really is just a basic demo of adding some posts to the page. That way we can see what it looks like to actually query the data in real time, and we can even tweak that query so that we can see what it's like to actually build the query, modify the query, and actually update it. So if we scroll down on this page, we can see the instructions for how we can get started with this, which is actually going to be similar to the Next.js WordPress starter, where we're going to copy this yarn create command, where we're going to use create next app in order to do so. So if I head to my terminal and I actually paste in that query, and let's call this application my-graphql-galaxy, and what this is going to do, if you're not familiar with create next app is it's going to first basically clone down this example project that I have here. It's going to then install all the dependencies, and it's even going to reset the git history. Basically it's going to get us immediately ready to get started and get productive with our application. So now we can see that it's done. I'm going to go ahead and cd into that directory, and we can see that we actually have one more step before we try to spin up this page, where we need to add an environment variable, and this is going to be our graphql endpoint for our WordPress instance. So as we can see next.js convention we're going to add this .env.local file. So I'm going to first open up my code editor with my new project, and at the root of the project I'm going to create a new file called .env.local, and inside here I'm going to add that environment variable.

7. Querying WordPress Data with GraphQL

Short description:

We installed WPGraphQL to query WordPress data with GraphQL. We updated the GraphQL query in our application to include the author for each post. By passing the updated query as props, we were able to display the author's name on each post. This demonstrates the power of using GraphQL and WordPress to query complex relationships and access data.

Now over back on the instructions I'm going to copy and paste that right inside, and next we don't want to try to query yourhost.com, we want to actually query our WordPress GraphQL endpoint, and that endpoint is going to by default be basically wherever your WordPress instance is installed slash GraphQL. So for instance, if I open up my spacejellydemo.wpengine.com slash GraphQL, we can see that while I do get an error here, we are able to see that this is a working GraphQL endpoint. So I'm going to take the same URL, and I'm going to paste it right into my environment variable, where we can see we now have this WordPress GraphQL endpoint set to my actual URL.

And now let's try to spin up our development server by running yarn dev, and we can see that immediately it's going to spin up a new server pointed at localhost port 3000. And if I actually try to open that up inside my browser, we can see that next.js is going to start to compile that page, where basically, it's pulling down that information for us, and it's going to actually build that page in real time. So we can see here now that I have my new blog post, my blog page, that is, my blog website, and we can see that if we start to scroll down here, we have all those posts that we saw right inside of WordPress, but now we're actually getting them inside of the application inside of our browser. So now we can see that we have each of the titles, and we have a description, and we even have a link for each of our posts, but we want to add a little bit more context to this. How about, what if we want to add the author to each of these posts. First, let's dive into the code to see how this is actually happening. So I'm going to go back to my code editor, and I'm going to particularly go to source pages index.js, which is going to be our home page, and if we see at the top here, if you're already familiar with React, there's really nothing special going on here. Really, we have our home component that's taking two props, and it's rendering that out into the page. But what is special is if we scroll way past that React component, we have this function that we're exporting called get static props, which is the Next.js way to fetch data that's going to be static for our application at compile time, where we can see that we're getting our Apollo client, and we're building this GraphQL query, where we're grabbing some general settings for our website, but we're also grabbing all those posts, just like we saw that we did before inside the Graphql Editor. Finally, once we have that data, we're going to just clean it up a little bit, and we're also going to construct the path that each of the posts is going to be available at, and then we're going to simply pass them as props, which again, if we scroll back to the top of the page, we can see that page and post props that we're passing right to the React component. And then at that point, it's just like any other React component, where we're grabbing those posts, we're iterating through, and we're able to render each one of those inside of the DOM, where then we have our Space Jelly demo blog site. So now, like I said, we want to add that author to it. I'm going to first grab that existing Graphql query that we saw right here, the one that we're actively using inside this project, and I'm going to go ahead and paste it right into my Graphql Editor here, going to click Printify here, just to fix the indenting, but I'm going to click Play, and we can see this is exactly the data that we're getting and passing into the application. We see that we have all the posts, we even get the excerpt here, but we also get that title and description, which we can see at the top that we're showing. So now, while we have all this other information for our posts, we want to also add the author to it. So we're going to find that posts section, which is right here, we have our posts, and for each of those edges in the node, we also want to add the author. So I'm going to simply start to open up that author, query the node for each of those authors, then we can see we get all the attributes for the actual author on the post, or in this instance, we probably want to grab the ID, since that's something that we usually want to have for each of our nodes, but then we want to also grab the name, which if we click play now, and I start to scroll down on the received data, we can see that we now see the author for each of these posts, which in this particular instance, it's myself. We see Colby Fayok here, but we were able to see how easy it was to paste in our existing query, update it, where now, just as easily as we pasted it in, let's copy this, and let's paste it right back into our application. We're now going to fix the indentation there. We just updated the query inside of our app, and to see that this is actually working, I'm going to console log out the actual posts prop here, where if we go inside our browser, I'm going to refresh the page, and I misspelled that there, so instead of console logs, there's only one of them, but we can see when the page actually reloads and recompiles, we have this array of data, which is all of our posts, but we now have this author property here, where if I start to expand everything, we can then see my name, KolbyFayal. So let's actually add this into our page, so I'm going to head down inside this react component, where how about right under the title, let's add a new paragraph tag, and let's say bye, and we're going to add our user name, let me close this paragraph tag, but we're going to specify the post.author.node.name, and just for my sanity purpose, the node.author.node.name. So let's see if that works. So now if we reload the page, and it actually probably should have fast reloaded, we can see that I do have Bye KolbyFayal there. And of course the spacing probably isn't the best, we can fix the styling later, but we can see how easy it was to update our query, simply add a little bit of data to that by updating that GraphQL query and we were able to immediately have that available on that post prop that we just passed right into the application, and we were able to do that because we now have the power to query those complex relationships, even the categories if we want, by using GraphQL and WordPress. All right, so let's actually recap what we achieved here. We first took an existing WordPress instance, and we installed WPGraphQL. Once that was ready, we were able to see how easily we can query all that WordPress data with GraphQL.

8. Flexibility of WordPress with GraphQL

Short description:

We bootstrapped a new application that takes advantage of querying with GraphQL, showing the flexibility of WordPress when coupled with GraphQL. It's a compelling option for data management, providing powerful solutions and a great experience for users and developers. Check out Next.js WordPress Starter on GitHub and my course, eCommerce on the Jamstack, on leveluptutorials. Find me at Kolbifeok to learn more or chat about the talk.

Finally, we bootstrapped a new application that takes advantage of querying with GraphQL, and then we added some extra info on top and with the UI. Now the goal here wasn't to get everybody, all of you, over to jump ship to WordPress, but it's to show the flexibility of it and why it's still a compelling option for a data management solution when coupled with GraphQL. We can come up with some pretty powerful solutions that provide a great experience for both our users and our developers.

If you want to check out my work, Next.js WordPress Starter is completely open source on my GitHub, and if you want to learn how to actually do all this in practice, you can check out my course, eCommerce on the Jamstack, over on leveluptutorials. And that's it. If you want to learn more or chat about the talk, you can find me everywhere at Kolbifeok. I'll also tweet out some of the stuff you've seen here today. Thanks, everybody.

9. WordPress and Modern Development

Short description:

WordPress works with modern development architectures, although not all plugins are supported for custom work. Most WordPress sites work well with WP GraphQL.

So we will start first with the question which you asked, and we will see, like, how the people voted on that question. So, just to recap, the question was, does WordPress work with modern development architectures? And it's amazing if you see the results. It's, like, 100% yes. So everyone voted for yes. Did you expect that? I guess that question was a bit obvious. No, I did not expect that. You know, I think, for the most part, it does work with every site, right? But there's the plug-ins, for instance, not every plug-in is going to be supported, especially if you're doing very custom work with WordPress. But, generally speaking, most of the WordPress sites are going to work pretty well with WP GraphQL.

WordPress and GraphQL Integration

Short description:

I started in the era of headless CMS and didn't know much about WordPress. I have a few questions for you. Does GraphQL support WordPress blocks? Generally, it doesn't natively support it, but there is a plugin that can scrape the content. WP GraphQL works with most WordPress websites, but some custom work may not work out of the box. It's developer-friendly and works well with plugins like advanced custom fields and custom post type. From a performance perspective, GraphQL and REST API have their advantages and considerations.

This is nice, I mean, because this is something which even I did not know much about, for me. So, I started in the era with the CMS when the era was of headless CMS. So, I didn't really know much about WordPress. So, I definitely learned a lot.

So, I have a few questions for you, and the first one is, does GraphQL support the WordPress blocks? Yeah, so, that's an interesting one because, mainly, that's what their newer editor is using right now. And unfortunately, it doesn't natively support it at the moment. It's because the way that Gutenberg's created is it doesn't save the content inside of the WordPress database as traditional WordPress content would. But there is a plugin that, my understanding, Hackly does that, where it'll scrape the content, I guess. I'm not too familiar with it. I haven't used it, but I know that there's some solution around that. But, generally speaking, most of the time, you'll use the HTML string that's rendered from WordPress.

Okay. So, we have found a hack for almost everything. There's always a way. So, if you're determined, there's always a way. Okay. So, I just wanted to know, you talked about WP GraphQL. So, I mean, will it work with any sort of WordPress website? Yeah. So, generally speaking, yeah. The tricky thing is, sometimes, there's a lot of custom work that you can do with WordPress, right? Because of just the nature of WordPress is, it's developer-friendly, where you can do a lot of different things and customize it to exactly your needs. And a lot of those custom things... Well, I shouldn't say a lot of those custom things. Some of those custom things might not work out of the box with it, right? But that said, because of how WP GraphQL's kind of hooked into the core of the WordPress database, a lot of that stuff should kind of just work, including a lot of the plugins that you might be familiar with already, like advanced custom fields or custom post type, those kinds of things.

That's interesting. Definitely. So we have talked... We are talking a lot about GraphQL and all, and previously... And now also we use REST API also in some of our projects. So I wanted to know your perspective on what do you think about from a performance side? So you talked about performance in the talk. So like...

Performance of GraphQL vs REST APIs

Short description:

GraphQL allows you to select only the necessary data, reducing unnecessary bytes downloaded in the browser. Making additional REST requests can add up, while a single GraphQL request makes one round trip. However, the performance depends on the specific scenario, and it's important to test and find the best solution. GraphQL's flexibility makes it a great tool for data relationships.

How do... What do you think about the performance when thinking from using GraphQL APIs while thinking REST... Or while using the REST APIs? Yeah. And I think there's a little bit of a caveat with my answer, because every situation is different. But I think it really... Some of the benefits of being able to use GraphQL is first of all, you're able to select just the info that you need, which really reduces in some instances where some REST APIs just give you a dump of all the data. And if you're getting that, those are extra bytes that that person has to download in the browser. But also in addition to that, if you're making additional REST requests, kind of like I showed in the talk, those network requests are going to add up as well, right? Whereas that single GraphQL request is going to just make that one round trip. But again, like it always... It's always really dependent, right? Because if you're just making one simple REST API request, and that REST API already is giving you limited data, of course it might be faster than that GraphQL query in your particular scenario. So it's really important to always test those things and try to make sure that you're really getting the best solution for you. But GraphQL generally is just so flexible in its nature. It's such a great tool to be able to use for data relationships.

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

From GraphQL Zero to GraphQL Hero with RedwoodJS

GraphQL Galaxy 2021

32 min

From GraphQL Zero to GraphQL Hero with RedwoodJS

Top Content

Tom Preston-Werner

GitHub cofounder, RedwoodJS author

Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.

redwoodjs frameworks graphql builders and founders

Local State and Server Cache: Finding a Balance

Vue.js London Live 2021

24 min

Local State and Server Cache: Finding a Balance

Top Content

Natalia Tepluhina

GitLab

This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

vue graphql server cache

14 Sanity CMS Agencies and Development Companies: Verified List (2026)

Featured Article

Robert Hart

If you are looking for a Sanity CMS agency or a Sanity developers to run your website development or content operations software migration, this guide gives you a verified shortlist and the exact questions to ask before signing anything. Most "Top Sanity CMS Agencies" lists are written by Sanity agencies and Sanity development companies trying to rank themselves. That's not automatically a problem, but it means rankings move based on whoever owns the URL, not who's actually shipping the best work. This listicle of popular Sanity CMS agencies, with evaluation criteria, ratings, time zones, target audiences, common projects, and a decision tree was written to help you pick the right Sanity partner. This is a way to approach finding your best development agency wisely, not just by typing ‘find best Sanity agency’, but using your critical thinking skills.These numbers show why the “right‑tool‑for‑the‑job” approach matters: small teams move faster, larger enterprises scale content across channels, and digital marketers ship campaigns without waiting on dev tickets.Sanity CMS development services: market context and trends (2026)The headless CMS market is no longer a niche developer preference — it is the dominant architecture for new digital builds. The global market reached $297 billion in 2026 and is on track for $678 billion by 2035, growing at a 9.6% compound annual rate, driven by API-first development, omnichannel content demands, and AI workflow integration. Within that market, Sanity has moved faster than most competitors by pivoting from pure CMS positioning to what it now calls a Content Operating System — infrastructure for structured content that feeds websites, mobile apps, AI agents, and internal tools from a single hosted data layer.Three trends are accelerating demand for Sanity CMS development services specifically in 2026. First, the AI content operations shift: Sanity is the only major headless CMS with a native MCP Server, giving development teams using Claude Code or Cursor direct programmatic access to content — creating, querying, and patching documents from inside their AI coding environment. Enterprises building AI-assisted editorial workflows are increasingly choosing Sanity precisely because it is the only platform that treats content as agent-readable structured data by design. Second, the Contentful exodus: Contentful's pricing scales aggressively at volume, and mid-market teams that outgrow the free tier are migrating at an accelerating rate. Sanity's flexible document model and more predictable pricing have made it the default migration target for teams moving off Contentful. Third, the composable commerce trend: DTC and e-commerce brands are replacing monolithic Shopify themes with headless storefronts where Sanity powers the content layer and Shopify handles transactions — a setup that requires specialist Sanity developers who understand both platforms. Sanity holds a 4.7/5 rating from over 900 verified G2 reviews, the highest in the headless CMS category, and is trusted in production by Anthropic, Shopify, Figma, PUMA, Spotify, and National Geographic.The listed Sanity agencies are grouped by evaluation criteria that helps to choose your developer based on your business situation. Assess your budget and check on several reasonable criteria of Sanity agency achievements and the agency' market positioning.What is Sanity CMS Agency?A Sanity CMS agency is a team of experienced web developers and engineers that specializes in building, customizing, and maintaining digital solutions using the Sanity content platform. These agencies help businesses create scalable content management systems, develop custom integrations, optimize content management, and improve various marketing workflows that meet specific business needs.Why are teams switching to Sanity CMS in 2026?Sanity CMS popularity is evident, Anthropic, Shopify, Figma, National Geographic, Unilever, and other prominent names and brands use Sanity CMS daily, and trust it for proven flexibility, as the CMS is loved for clear real-time editing, customizable workspace with Sanity Studio, and general flexibility. Many devs love Sanity for offering robust APIs and supporting frontend frameworks like Next.js, Astro, and Nuxt. Since 2021, after a Sanity breakout year, the company has become one of the leader in content management software. On GitHub, Sanity platform has 1.3k followers and more than 2.7million of downloads that is really inspiring.We've picked Sanity CMS from many content management software options, and tried to evaluate why editorial teams migrate from traditional content systems switching to headless ones, and to Sanity in particular. Here’s a succinct table with the main reasons for this choice:TriggerWhat They're LeavingWhat They GainOutgrowing rigid structuresGhost, WordPressFlexible content modeling, reusable content blocksWorkflow frustrationPayload, self-hosted CMSesLive preview, draft management, no "push to staging"SEO plugin dependencyWordPress + YoastSchema built directly, predictable structured dataAI dev workflow needsAny legacy CMSSanity MCP for Claude/Cursor integrationContent management should be easy for everyone involved. This includes content managers, marketers, product managers, and developers. These team members maintain and configure the CMS for better usability. Sanity.io supports this balance well.What developers and marketers actually say about Sanity CMS (top 5 reasons to use it and 5 reasons not to)The following is drawn from G2 verified reviews (900+ reviews, rated 4.7/5), practitioner assessments, and community feedback across Reddit, dev.to, and direct user reports. Not marketing copy.❤️ 5 Reasons People Love Sanity1. Schema-as-code that survives real editorial complexity The most consistent theme across developer reviews is that Sanity's content model — defined in TypeScript, living in version control, and adaptable to any data shape — removes the ceiling that rigid CMSes impose. As one verified G2 reviewer put it: the schema scales with the project instead of fighting it on the next page request. Engineers working with government websites, SaaS platforms, and e-commerce catalogs all cite this as the reason they would not go back to WordPress or Contentful.2. Real-time collaboration that feels like Google Docs Multiple reviewers across G2 and Reddit describe Sanity Studio's collaborative editing as the first CMS that genuinely eliminates the "who has this document open" problem. Multiple editors can work on the same document simultaneously without overwriting each other's changes — a capability that for many teams replaced entire Slack threads of coordination overhead.3. GROQ makes complex content relationships trivial Developers who invest in learning GROQ consistently report it as a productivity multiplier. The ability to write deeply nested joins, filters, and projections in a single query — returning exactly the data shape the frontend needs — eliminates the multiple REST requests that equivalent GraphQL setups require. The initial GROQ learning curve is real (see below), but practitioners rate it highly once past it.4. The Studio is genuinely usable by non-technical editors Unlike many developer-first tools that produce admin interfaces only developers can navigate, a well-configured Sanity Studio gives content editors a tailored, intuitive environment. A verified G2 reviewer managing a municipal government website noted that content previously requiring a developer to touch the codebase is now fully managed by non-technical staff through Studio, with no manual deploys or cache headaches.5. Marketing teams gain meaningful autonomy Enterprise reviewers consistently cite reduced bottlenecks as the primary business outcome. One enterprise reviewer with 20+ years of CMS experience described it as the easiest CMS in their career, specifically because marketing teams gained the ability to create, edit, and publish content without queuing development tickets — accelerating campaign launches and cutting time-to-market on localized content.💔 5 Reasons People Dislike Sanity1. Steep initial learning curve, especially for non-developers

This is the most frequently cited complaint across G2 (60 mentions across "steep learning curve" and "challenging setup" categories), Reddit threads, and practitioner reviews. Setting up schemas, learning GROQ, and configuring Studio customizations requires genuine developer investment. Unlike WordPress or Webflow, there are no ready-made themes. Non-technical founders or small teams without dedicated developer support will struggle to get meaningful value without help.2. Documentation gaps on advanced use cases

Several reviewers note that Sanity's documentation is strong for basics but thins out quickly on advanced patterns — custom Studio components, complex GROQ projections, AI Assist wiring, Content Releases workflows. Practitioners report piecing together answers from community posts, GitHub issues, and examples rather than official docs. Sanity has improved this noticeably since 2024, but the gap persists for edge cases.3. Costs can surprise at scale

The free tier is genuinely generous. But several practitioners and the team at ContentWrap (who documented a 1,500+ document enterprise migration) flag that unexpected API usage, asset bandwidth, and dataset volume can push bills significantly above base plan expectations. The Growth plan runs $300+/month at volume. Teams migrating large Contentful or Webflow installs should model their API call volume before committing.4. No frontend included, Sanity CMS requires a developer to get full value

Sanity does not ship a frontend, and this is by design. But for teams expecting a traditional CMS experience where the website comes with the tool, this is a mismatch. One founder-reviewed account noted that unlike WordPress, there are no themes — everything visual requires a developer to build. This is only a problem if expectations are set incorrectly, but it surfaces repeatedly in mixed-technical-level reviews.5. Customization creates maintenance responsibility

The same flexibility that makes Sanity powerful creates an ongoing obligation. Custom inputs, plugins, Studio configurations, and schema files live in your codebase and need to be maintained as Sanity evolves. A verified G2 reviewer flagged that basic features sometimes require custom implementation where other CMSes provide them out of the box — and those customizations become technical debt if the original developer moves on.What is Sanity CMS used for? Sanity markets itself as a Content Operating System, not an average CMS. It is massive infrastructure for structured content that can feed websites, apps, AI agents, IoT, and internal tools from a single Content Lake.The companies running Sanity in production include ubiqutous Anthropic, Shopify, Figma, PUMA, AT&T, Burger King, Spotify, National Geographic, and Unilever. They are not using it because it is easy to set up. They are using it because it is the most programmable content platform available.Content operations software: where Sanity fitsThe term content operations software describes platforms that manage the entire content lifecycle — creation, approval, publishing, distribution, and measurement — not just storage. Sanity has expanded from pure headless CMS into this space through several recent product additions:Sanity Studio is the editing environment. Fully customizable with React, it can be shaped to match any editorial workflow — from simple blog publishing to multi-stage legal review processes.Content Agent is Sanity's built-in AI assistant, allowing editors to generate, transform, and query content through natural language inside the Studio. Unlike third-party AI writing tools, it has direct access to your content graph.Content Releases manages scheduled, coordinated publishing across multiple documents — the equivalent of a "campaign" or "issue" workflow that was previously impossible in headless CMS without custom development.Sanity MCP Server is the integration point for AI development tools. Developers using Claude Code or Cursor can query and patch Sanity content directly from their coding environment — the first native MCP integration in the headless CMS market.Agent API (Agent Actions) allows programmatic content creation, transformation, and publishing through an API designed for AI agents rather than human editors. This is Sanity's forward bet on AI-generated and AI-maintained content at scale.Together these make Sanity the most complete content operations platform available to engineering teams in 2026 — not just a place to store content, but infrastructure for how content is created, reviewed, published, and consumed by both humans and machines.Why teams are switching to Sanity CMSTeams typically migrate to Sanity from three starting points:What Customers DislikeWhat they are solving forWhat Sanity providesWordPress + YoastSEO tooling bolted onto a publishing toolSchema-native structured data, predictable metadataContentfulRigid field types, expensive at scaleFlexible document model, GROQ, no per-field pricingDrupal / AEMDeployment complexity, slow editorial workflowHosted Content Lake, real-time collaboration, portable textAny legacy CMSAI integration roadblocksSanity MCP Server for Claude and Cursor workflows, Agent APIThe Sanity MCP Server point deserves emphasis in 2026. Sanity is the only major headless CMS with a native MCP integration, meaning developers using Claude or Cursor can query, create, and patch content directly from their AI coding environment. For teams building AI-native content operations, this is a material advantage over every alternative.How to choose a Sanity development companyGeneric "things to look for in an agency" advice is useless. These eight criteria are specific to Sanity work and map directly to where projects fail.1. Official partner status, verify it yourselfCheck sanity.io/agency-partners. Sanity vets partners directly and the list changes. An agency that says they are a partner but does not appear in the directory either lost the status or never had it. Do not take their word for it.2. GROQ fluency, not just GraphQLAsk any shortlisted agency to send you a GROQ query from a recent project. If they send you GraphQL instead, or cannot explain why they chose GraphQL in a specific situation, their Sanity work is shallow. GROQ is the native query language. Developers who build entirely in GraphQL are translating rather than reasoning.3. Production schema examples with editorial UXAsk to see an anonymized schema.ts file from a comparable project. Red flags: field names that are snake_case technical jargon with no title or description properties set, no custom validation rules, no portable text configuration. This tells you whether they design schemas for developers or for editors.4. Custom Studio componentsLive preview, scheduled publishing, role-based access, custom input components, and AI Assist integration are not automatic. They require Studio engineering. Ask specifically what custom Studio components they have built and whether you can see a demo. Any agency that cannot show at least three custom Studio patterns has limited depth.5. Documented migration plan for your current CMSIf you are moving from WordPress, Contentful, Drupal, or AEM, ask for a written migration plan before signing. It should include: content inventory and mapping, transformation scripts, redirect strategy, parallel-run period, and a rollback plan. Agencies that quote migrations without a written plan will discover scope on your budget.6. Average project cost, not just a minimumA $10K minimum tells you almost nothing. Ask: "What is the average completed project cost for a project similar to ours, and what drove scope expansion on the last three you delivered?" The answer reveals budgeting discipline, not just price positioning.7. Named client references in your industryA list of logos is not a reference. Ask for a name and email of a client at a company of similar size in a similar industry, and call them. Ask: "What would you do differently if you hired them again?" Written references are diplomatic. Phone calls are honest.8. Post-launch warranty and retention rateAsk what percentage of clients re-engage them after launch. Below 70% means they ship and disappear. Ask what the warranty covers — bugs introduced by their code should be fixed at no charge for a defined period (30–90 days minimum). Get this in writing.Top 15 Sanity development companies in the world (2026)Average cost figures are marked as estimated, and based on comparable project descriptions and market rates. Published figures come from agency-stated minimums and ranges.1. FocusReactiveHQ: London · Amsterdam · Warsaw · Remote
Time zone: CET, strong US East overlap
Founded: 2019 · Team: 30+
Sanity partner status: Official
Clutch rating: 4.9 / 5 (22+ verified reviews)
Average project cost: $15K–$60K (published range $10K–$49K; enterprise above)FocusReactive is a Sanity CMS agency known for its CMS partnerships with the leading content software like Sanity, Storyblok, Contentful, Payload. This vendor-agnostic positioning is genuinely unusual: most agencies recommend what they know, not what fits. Their open-source output (Groqd, CMS-Kit) and conference organizing activity (JSNation, React Summit) signals technical depth that few agencies can match.Best for: Teams that have not decided on a CMS yet, B2B SaaS marketing sites, CMS-to-CMS migrations from WordPress or Contentful, multi-locale enterprise builds, AI-native content workflows
Typical stack: Sanity + Next.js, Shopify + Sanity headless commerce
Limitations: Not the right fit for legacy PHP/Drupal custom work or Fortune 100 programs where headcount volume is the primary requirement2. Weframe TechHQ: Bangalore, India (Serving Global Clients)
Time zone: IST with US, UK & APAC overlap
Founded: 2019 · Team: 40+
Sanity partner status: Certified Sanity Developers
Upwork rating: 100% Job Success Score
Average project cost: Custom engagements for startups, mid-market, and enterprise organizationsWeframeTech is the Upwork top rated Sanity CMS development agency that helps startups, scale-ups, and enterprise businesses build high-performance digital experiences using modern headless architecture. The agency specializes in combining Sanity CMS with frameworks like Astro, Next.js, and Nuxt.js to create fast, scalable websites that improve content operations, SEO, and overall business performance. Rather than focusing solely on implementation, WeframeTech emphasizes long-term growth through performance optimization, content architecture, conversion-focused development, and scalable composable solutions.Best for: Companies planning to build headless commerce with Sanity CMS and Medusa.js or Sanity CMS with Shopify Plus, where WeframeTech has established deep implementation expertise and is one of the strongest partners for composable commerce projects. Also ideal for B2B SaaS, fintech, healthcare, AI, and enterprise marketing websites, WordPress, Webflow and Contentful migrations, multi-market and multilingual platforms, businesses prioritizing SEO, Core Web Vitals, conversion optimization, and long-term scalability.Typical stack: Sanity CMS + Next.js, Astro, Nuxt.js, Shopify Plus, Medusa.js, Commerce Layer, Commercetools
Limitations: Best suited for organizations adopting modern headless architecture and composable web platforms rather than businesses seeking traditional monolithic CMS or legacy PHP-based development3. DEPT®HQ: Amsterdam, NL (30+ locations, 5 continents)
Time zone: Global
Founded: 2015
Sanity partner status: Official
Clutch rating: 4.8
Average project cost: $100K–$500K+ (estimated; enterprise tier)DEPT® is the largest verified Sanity partner by headcount and is the right choice when Sanity is one component inside a global digital transformation that also involves engineering, brand, and marketing. Clients include Google, KFC, Philips, Fidelity, Twitch, and eBay. They are B Corp certified and Climate Neutral. Sanity is one of many platforms in their stack — this is not a Sanity-specialist shop.Best for: Global enterprises that need Sanity integrated into a multi-system digital platform with full brand, technology, and marketing support
Typical stack: Multi-platform; Sanity used as content layer within broader DXP
Limitations: Not the right fit for focused Sanity builds, SMBs, or teams that want dedicated Sanity expertise4. RaftLabsHQ: Ahmedabad, India · Dublin, Ireland
Time one: Global
Founded: 2015
Clutch rating: 4.9 / 5 (50+ verified reviews)
Average project cost: $10k-$60k

RaftLabs is an AI-first software development and growth marketing company that provides Sanity development and custom web, mobile, and SaaS development for startups and growing businesses. The company mainly serves clients across the US, UK, Canada, Europe, and GCC. Its headless CMS practice focuses on Sanity, with experience across content modeling, CMS implementation, API-driven delivery, and frontend integration with Next.js and React. The team also uses Sanity for its own website, where it migrated from Webflow and launched more than 3,000 programmatic SEO pages without downtime. Best for: Startups and growing businesses that need a Sanity-powered website, headless CMS implementation, programmatic SEO, CMS migration, or custom frontend integration. Also a fit for teams that need Sanity connected to web or mobile products rather than a standalone marketing website.Limitations: RaftLabs Company is a good choice for startups and growing businesses that need custom development alongside their CMS. Companies looking for enterprise consulting, niche CMS specialization, or simple website development projects may find that its broadercapabilities across web applications, mobile development, SaaS platforms, and AI solutions exceed the scope of their needs. 5. We Make WebsitesHQ: London · New York
Time zone: GMT / EST
Founded: 2008 (joined TechM XDS 2021)
Sanity partner status: Official
Clutch rating: 4.8
Average project cost: $30K–$150K (estimated; minimum from $1K stated)One of the most experienced Shopify Plus agencies globally, with Sanity powering the content layer on headless storefronts. Their work targets premium DTC and B2B brands in fashion, beauty, and lifestyle. The TechM XDS backing provides enterprise stability. The limitation is scope: this is a Shopify-first agency — Sanity without Shopify is not their focus.Best for: Premium Shopify Plus + Sanity headless storefronts, DTC brands with global ambitions
Limitations: Not the right choice for non-commerce Sanity projects6. WebstacksHQ: San Diego, CA, USA
Time zone: PST
Founded: 2020
Sanity partner status: Official
Average project cost: $40K–$120K (estimated; minimum not published)Webstacks is verticalized in one segment. They treat websites as products, not projects: ongoing iteration, design systems, and composable architecture rather than one-off builds. Notable work includes Calendly's marketing site redesign.Best for: B2B SaaS marketing websites, FinTech, enterprise software
Limitations: Premium pricing; not a fit for e-commerce-first or small marketing sites7. CodalHQ: Chicago, IL · London · Bangalore
Time zone: CST + IST
Founded: 2009
Sanity partner status: Official
Clutch rating: 4.9
Average project cost: $50K–$200K (estimated)Codal is a full-service shop — design, strategy, dev, QA, and project management — which makes them a strong fit for mid-to-large enterprise projects that need a single partner to own the whole delivery. They work across retail, CPG, healthcare, and manufacturing. Sanity is one of several platforms in their portfolio.Best for: Mid-to-large enterprise with complex omnichannel content, full-service delivery needs
Limitations: Less Sanity-specialized than boutique shops8. MonogramHQ: Atlanta, GA, USA
Time zone: EST
Founded: ~2017
Sanity partner status: Official
Average project cost: $15K–$150K (range published)Monogram is the strongest pick for design-led composable builds where visual quality and editorial experience matter as much as the engineering. They work in Astro, Svelte, and Next.js — modern stack adoption that signals they are not defaulting to safe legacy choices. Notable for AI/dev-tools company websites and design-conscious brands.Best for: Design-conscious brands, scaling startups, composable e-commerce, dev-tools company sites
Limitations: Smaller team limits capacity for very large enterprise programs9. Nearform (formerly Formidable)HQ: Seattle, WA (also Denver, Phoenix, London, Toronto)
Time zone: PST + Global
Founded: 2013
Sanity partner status: Official
Average project cost: $50K–$300K (minimum $30K published)Nearform brings serious React engineering depth to Sanity — GROQ optimization at scale, ISR and edge rendering, React Native + Sanity systems. Their acquisition of Formidable (the open-source React specialists) gives them credibility on high-traffic performance work that most agencies cannot match. Notable past work contributed to a commerce platform with a $3.3B acquired valuation.Best for: High-traffic performance-critical applications, enterprise engineering, React Native
Limitations: Sanity is one tool of many; editorial UX depth is secondary to engineering10. Two Point OHQ: Belgium · Netherlands
Time zone: CET
Sanity partner status: Official
Average project cost: $60K–$200K (minimum ~$50K published)Two Point O is the specialist choice for mid-market and enterprise organizations building composable digital platforms with Sanity specifically. They focus on multi-brand content platforms, large-scale migrations, and custom Studio development. Their limitation is scale — boutique capacity means they are not suited for concurrent multi-team enterprise programs.Best for: Mid-market to enterprise composable platforms, multi-brand content infrastructure, large migrations
Limitations: Not for small sites or low-budget projects11. RepresentHQ: Oslo, Norway · London
Time zone: CET
Founded: ~2016
Sanity partner status: Official
Average project cost: ~$27K–$100K+ (300K NOK minimum published, ~$27K USD)Represent is a senior-only boutique with Sanity-pioneer status. The Agency have been building production Sanity work since the platform's early days. Their focus is headless Shopify + Sanity for DTC and e-commerce brands in the Nordics and Silicon Valley, with a business-advisory approach that goes beyond pure development. Notable for AI-assisted content translation pipelines built inside Sanity Studio.Best for: Ambitious DTC and e-commerce brands, Nordics and Silicon Valley, complex content models, GPT-integrated Studio workflows
Limitations: Boutique capacity; not for non-commerce enterprise content systems12. 85SIXTYHQ: California, USA
Time zone: PST
Years in business: 16+
Sanity partner status: Official
Average project cost: $30K–$120K (estimated)85SIXTY is unusual in combining Sanity CMS development with CRO (conversion rate optimization) and analytics rigor. Most Sanity agencies are pure-development shops. 85SIXTY layers GA4, GTM, and Media Mix Modeling onto headless Shopify + Sanity builds, which is the right combination for scaling DTC brands focused on measurable revenue lift rather than just a fast website.Best for: Shopify Plus brands that want dev + CRO + analytics, scaling DTCs with international ambitions
Limitations: Shopify-anchored; not a generalist Sanity shop13. IkiusHQ: Turku, Finland
Time zone: CET
Sanity partner status: Official
Average project cost: $15K–$60K (estimated)Ikius is a modern web development studio specializing in Sanity headless CMS implementations. They work with businesses ranging from SMBs to enterprise clients and have particular strength in content-rich marketing sites and e-commerce integrations. Their Sanity expertise extends to both Studio customization and frontend development.Best for: European businesses needing Sanity headless CMS implementations, content-rich marketing sites
Limitations: Smaller public profile than the larger agencies on this list14. iO AgencyHQ: Belgium (Mechelen), NL, Sweden, Denmark, Bulgaria
Time zone: CET
Founded: 2005
Sanity partner status: Official
Clutch rating: 4.9
Average project cost: $75K–$300K+ (estimated; enterprise positioning)iO is a full-service European agency: strategy, brand, content, marketing, and technology — where Sanity slots into a much larger digital transformation engagement. Their value is not Sanity depth but enterprise governance: compliance, multi-stakeholder delivery, and cross-country rollouts. The right choice for European enterprises and government bodies that need a single partner across disciplines.Best for: European enterprise digital transformation, government bodies, multi-country digital platforms
Limitations: Premium pricing; Sanity is one of many CMS options in their portfolioSanity development company comparison table (2026)
Web AgencyHQTime zoneTeam sizeAverage project costBest use case
1FocusReactiveLondon / Amsterdam / WarsawCET30+$30k–$50k Sanity CMS, Storyblok, Payload, enterprise project, SaaS, AI / Machine Learning, CMS migrations2Weframe TechBangalore, IndiaIST, UTC40+SaaS websites & landing pages: $5-$80k; Headless commerce projects: $20-$200k+Ecommerce websites on Sanity CMS, Next.js, Astro3DEPT®AmsterdamGlobal4,000+$100K–$500k+Global enterprise DXP4RaftLabsDublin, IrelandGlobal50+$10K - 60K+Sanity migrations, programmatic SEO, fixed-price B2B builds5We Make WebsitesLondon / NYGMT/EST50+$30K–$150kShopify Plus + Sanity headless commerce6WebstacksSan Diego, USPST~50$40K–$120kB2B SaaS marketing sites7CodalChicago, USCST+IST150+$50K–$200kEnterprise full-service8MonogramAtlanta, USEST20–30$15K–$150kDesign-led composable9NearformSeattle, USGlobal100+$50K–$300kHigh-performance React / enterprise eng10Two Point OBelgium / NLCET40+$60K–$200kMid-market enterprise Sanity platforms11RepresentOslo / LondonCETBoutique$27K–$100k+DTC e-commerce, Nordics / SV1285SIXTYCalifornia, USPSTMidsize$30K–$120kShopify + CRO + analytics13IkiusTurku, FinlandCETSmall$20K–$60kSanity headless, EU market14iO AgencyBelgium / NLCET1,000+$10K - 60K+
$75K–$300kSanity migrations, programmatic SEO, fixed-price B2B buildsSanity CMS Agency Main CaveatsA few honest caveats about the general approach to finding dedicated Sanity developers:Time zones are underrated. A senior Croatian, Belarusian, or Polish, or any remote European team you can talk to live for 4 hours a day will out-deliver a US Sanity developer that bills 3× and replies on Slack within a business day. Pick for overlap and convenience, not just postcode.Rankings move fast. Clutch ratings shift, agencies grow or shrink, partnerships start and end. Verify every data point before hiring — especially partner status on sanity.io/agency-partners. Specialization beats reputation for Sanity work. Any development company can generate hundreds of positive Google reviews or whatever, and these public directories should be checked twice before contacting for a Sanity project. The Sanity ecosystem (GROQ, Studio, schema patterns) and official partnership with engineering agencies around the world is deep enough that depth matters more than brand.Sanity developer rates (2026)Whether you are hiring a Sanity development company or an individual Sanity CMS developer, these are the current market rates:Engagement typeRate rangeNotesFreelance Sanity developer (Upwork$51-$75/hrSenior developers command $80–$120/hrBoutique Sanity agency (EU/UK)$80-$130/hrCET timezone, 4hr+ US overlapMid-size Sanity agency (US)$120-$200/hrHigher for senior-only teamsEnterprise agency (US)$150-$250/hrFull-service with PM and designCost-effective agency (India/EE)$35-$70/hrSanity-specific expertise variesMonthly retainer (boutique)$8K-$15K/monthOngoing iteration modelFixed project (marketing site)$15K-$50KSimple schema, standard frontendFixed project (enterprise migration)$50K-$200K+Complex schema, content transformationWhich Sanity CMS agency should you hire?Use this decision logic before booking any intro calls:Sanity-first, complex schema architecture → FocusReactiveHeadless Shopify + Sanity, premium fashion or luxury brand → Commerce-UI or We Make WebsitesHeadless Shopify + Sanity, Nordic or EU DTC brand → RepresentHeadless Shopify + Sanity + CRO/analytics → 85SIXTYEnterprise content platform, European full-service → Raftlabs or DEPT®B2B SaaS marketing site, US-based preference → Webstacks or Monogram (design-led)Multi-brand, multi-locale content infrastructure → Two Point ODesign-led, editorial UX focus → Monogram Budget-constrained, need genuine Sanity expertise → IkiusEnterprise content platform, US full-service → Codal or NearformB2B SaaS marketing site, EU preference or async-friendly → FocusReactiveHow to run the Sanity agency selection processStep 1: Write a one-page brief first. What you are building. Your current CMS. Content volume and type. Number of editors. Target launch date. Integrations (CRM, commerce, search). Budget range. Without this, every agency conversation will be exploratory rather than evaluative.Step 2: Shortlist three agencies from this list. Use the decision tree above. Do not contact more than four — you will waste your own time on calls that reveal nothing differential.Step 3: Send the same five questions to all three:Show me a Sanity schema.ts from a project similar to mine.How do you handle live preview, scheduled publishing, and role-based access?What is your migration plan for content from [current CMS]?What does your warranty cover and for how long after launch?Who specifically works on this project — names, seniority, and hourly rate?Step 4: Run a paid discovery before signing a full build. $2K–$5K for a one-week discovery produces a content model sketch, a migration risk register, and a detailed scope. It also tells you whether the team can think — and gives you a deliverable even if you walk away.Step 5: Reference-check by phone, not email. Ask former clients: "What would you do differently if you hired them again?" The answer is always more useful than "what did they do well."Step 6: Sign with fixed milestones and a kill clause. Time-and-materials with no milestones is where projects bleed indefinitely. Fixed milestones with an exit option at each one protect both sides.Conclusion: should you hire a freelance Sanity developer or an agency?This is the practical question that comes after every list, and it has a direct answer.Hire a freelance Sanity developer when: you have a small, well-defined scope (a schema audit, a custom Studio input, a GROQ optimization pass), a limited budget under $10K, and an in-house developer who can own the codebase long-term. Hire a Sanity development agency when: the project involves content migration, multi-locale rollouts, custom editorial workflows, a headless commerce storefront, or any situation where the CMS needs to outlast the original developer. Sanity CMS agencies bring team coverage, documented schema decisions, post-launch warranties, and the ability to scale without rehiring. Their higher day rate typically produces a lower total cost of ownership over 18-24 months because they reduce the rebuild cycles that under-specified freelance work creates.Development agencies tend to win on total cost of ownership above roughly $20,000 in project scope, particularly when the engagement involves ongoing editorial complexity rather than a single contained deliverable. Below that threshold, a freelance Sanity developer with verified partner certification is often the most economical choice. One practical test to find a professional Sanity Agency: ask any candidate (a freelancer or an agency) to show you a schema.ts file from a production project and explain three design decisions they made in it. A freelancer who can answer that question fluently is worth more than an agency that cannot. The credential matters less than the reasoning. The question is which one matches your project type, budget, and timezone. Hire Sanity Developers WiselyChoosing the right Sanity CMS agency or development team comes down to real expertise, proven experience, and actual websites launched. Maintainability matters more than most teams will tell you: you won't always have developers and marketing aligned post-launch, so initial support is critical to help your content team set up the right processes from day one.SEO capabilities are a given, but in 2025-2026, Generative Engine Optimization (GEO) has become a meaningful differentiator. You need a team that understand how to structure content for AI-driven search, not just traditional SEO ranking signals. Daily progress updates keep you in control and eliminate surprises, and flexible revisions ensure the final build actually matches your requirements.Most importantly, work with a dedicated team and official Sanity CMS implementor that has a clear project coordinator, not a fragmented setup where accountability gets lost. The difference between a smooth launch and a painful one usually comes down to that single point of contact.Frequently asked questions about Sanity CMSIs Sanity CMS free?Yes, the free tier includes Sanity Studio, the hosted Content Lake APIs, and real-time collaborative editing — enough for solo developers, small sites, and prototypes. Paid plans (Growth, Enterprise) add higher API quotas, SSO, advanced roles, audit logs, and dedicated support. Free to start, paid as you scale. What is GROQ?GROQ (Graph-Relational Object Queries) is Sanity's native query language. It is designed specifically for querying document graphs with deeply nested references — more expressive than GraphQL for content-heavy applications. GROQ fluency is the clearest technical differentiator between Sanity specialists and general headless CMS developers.What is a Sanity Studio?Sanity Studio is an open-source, React-based editing environment that runs in the browser. Unlike fixed-UI CMSes, every aspect of Studio can be customized — field inputs, navigation structure, live preview, AI integrations, validation rules, and workflows. Studios are typically deployed to a subdomain (studio.yourdomain.com) and built as part of the project codebase.What is the Sanity Content Lake?The Content Lake is Sanity's hosted data layer, the cloud database that stores all your content. It is queried via GROQ or GraphQL from any frontend. Unlike self-hosted CMSes, you do not manage the database. Sanity manages replication, backups, and CDN delivery. The Live CDN ensures real-time content delivery globally.How long does a Sanity implementation take?A standard marketing site with a well-defined schema takes 6-10 weeks from kick-off to launch. A headless e-commerce storefront with Shopify integration typically takes 10–16 weeks. An enterprise migration from Drupal or AEM with content transformation takes 16–24 weeks or more depending on content volume and integration complexity.Sources: sanity.io/agency-partners (October, 2026), clutch.co/web-developers/sanity (June 2026), agency-published case studies and pricing pages, Sanity product documentation, Crunchbase, TechCrunch, Agency websites, and Google search. Cost figures marked "estimated" are based on comparable project scope and market rate data — verify directly with each agency.

web development headless cms

Batteries Included Reimagined - The Revival of GraphQL Yoga

GraphQL Galaxy 2021

33 min

Batteries Included Reimagined - The Revival of GraphQL Yoga

Uri Goldshtein

Founder of The Guild, the largest open source group in GraphQL ecosystem.

Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.

graphql react server components

Rock Solid React and GraphQL Apps for People in a Hurry

GraphQL Galaxy 2022

29 min

Rock Solid React and GraphQL Apps for People in a Hurry

Ryan Chenkie

Founder @ CourseLift

The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.

react graphql

Adopting GraphQL in an Enterprise

GraphQL Galaxy 2021

32 min

Adopting GraphQL in an Enterprise

Shruti Kapoor

Lead Front End Engineer @ Slack

Today's Talk is about adopting GraphQL in an enterprise. It discusses the challenges of using REST APIs and the benefits of GraphQL. The Talk explores different approaches to adopting GraphQL, including coexistence with REST APIs. It emphasizes the power of GraphQL and provides tips for successful adoption. Overall, the Talk highlights the advantages of GraphQL in terms of efficiency, collaboration, and control over APIs.

graphql enterprise

Workshops on related topic

Build a Headless WordPress App with Next.js and WPGraphQL

React Summit 2022

173 min

Build a Headless WordPress App with Next.js and WPGraphQL

Top Content

Workshop

Kellen Mace

In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.

next.js graphql wordpress

Build with SvelteKit and GraphQL

GraphQL Galaxy 2021

140 min

Build with SvelteKit and GraphQL

Top Content

Workshop

Scott Spence

Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A

graphql svelte

Relational Database Modeling for GraphQL

GraphQL Galaxy 2020

106 min

Relational Database Modeling for GraphQL

Top Content

Workshop

Adron Hall

In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1 a. Relational Database Data Modeling b. Comparing Relational and NoSQL Databases c. GraphQL with the Database in mindPart 2 - Hour 2 a. Designing Relational Data Models b. Relationship, Building MultijoinsTables c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites a. Data modeling tool. The trainer will be using dbdiagram b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples c. Hasura

graphql database

Fetch, useEffect, React Query, SWR, what else?

React Advanced 2023

102 min

Fetch, useEffect, React Query, SWR, what else?

Top Content

WorkshopFree

Ondrej Polesny

In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others

headless cms react query swr vs react query react query vs useeffect react swr react useeffect

Build and Deploy a Backend With Fastify & Platformatic

JSNation 2023

104 min

Build and Deploy a Backend With Fastify & Platformatic

Top Content

WorkshopFree

Matteo Collina

Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/).
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.

cloud node.js graphql fastify

Building GraphQL APIs on top of Ethereum with The Graph

GraphQL Galaxy 2021

48 min

Building GraphQL APIs on top of Ethereum with The Graph

Top Content

Workshop

Nader Dabit

The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.

ethereum graphql api development