Enhance customer experiences with Apollo GraphOS


<p>Two years ago we set out to build Apollo Explorer &#8211; the GraphQL IDE we felt was missing from the GraphQL community. And last summer, we made Explorer available for local development by releasing it in <a href="https://www.apollographql.com/blog/announcement/platform/apollo-sandbox-an-open-graphql-ide-for-local-development/">Apollo Sandbox</a>. But Sandbox still ran on the Apollo Studio domain, and our #1 challenge has been distributing Explorer in a way that gives you enough control over the network properties of your queries. Authentication, CORS, firewalls, you name it – a GraphQL IDE exists to let people write queries, and graph admins need to be able to control the network properties of those HTTP requests, full stop.</p>



<p>We added a lot of controls to Explorer to help. We made a way for graph admins to set default headers on their graphs. We built a mechanism for you to define preflight scripts which can do things like automatically refresh tokens in the headers on your graph. But in the end, we have found that there’s no setting we can add to Studio that can replace what <strong>you</strong> can do with full control over the network requests from our IDE.</p>



<p><strong>That’s why today we are giving Sandbox to <em>you</em>.&nbsp;</strong></p>



<p>We are over the moon to share with you that we have made Apollo Sandbox available for you to <strong>embed on any website</strong>, not just on Apollo Studio. ✨🌙 ✨</p>



<h2 class="wp-block-heading"><a href="#how-to-embed-apollo-sandbox" aria-hidden="true" class="aal_anchor" id="how-to-embed-apollo-sandbox"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>How to embed Apollo Sandbox</h2>



<h3 class="wp-block-heading"><a href="#embedding-apollo-sandbox-with-html" aria-hidden="true" class="aal_anchor" id="embedding-apollo-sandbox-with-html"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Embedding Apollo Sandbox with HTML</h3>



<p>We are now distributing the full-featured code of Apollo Sandbox over a CDN, so you can embed it on any website you’d like. All you need is a little HTML:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-markup">&lt;div id=&quot;sandbox&quot; style=&quot;position:absolute;top:0;right:0;bottom:0;left:0&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
 new window.EmbeddedSandbox({
   target: &quot;#sandbox&quot;,
   // Pass through your server href if you are embedding on an endpoint.
   // Otherwise, you can pass whatever endpoint you want Sandbox to start up with here.
   initialEndpoint: window.location.href,
 });
 // advanced options: https://www.apollographql.com/docs/studio/explorer/sandbox#embedding-sandbox
&lt;/script&gt;</code></pre>



<h3 class="wp-block-heading"><a href="#embed-sandbox-by-default-for-apollo-server" aria-hidden="true" class="aal_anchor" id="embed-sandbox-by-default-for-apollo-server"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Embed Sandbox by default for Apollo Server</h3>



<p>If you’re using Apollo Server, you can easily turn on embedding for Sandbox with<a href="https://github.com/apollographql/apollo-server/blob/main/CHANGELOG.md#v380"> a new embed parameter</a> that we released in v3.8.0. This will be the default experience in Apollo Server 4.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const {
 ApolloServerPluginLandingPageProductionDefault,
 ApolloServerPluginLandingPageLocalDefault
} = require(&#039;apollo-server-core&#039;);

const server = new ApolloServer({
 ...
 plugins: [
    process.env.NODE_ENV === &quot;production&quot;
      ? ApolloServerPluginLandingPageProductionDefault({
          embed: true,
          graphRef: &quot;plaid-gufzoj@current&quot;
        })
      : ApolloServerPluginLandingPageLocalDefault({ embed: true })
 ]
});</code></pre>



<h3 class="wp-block-heading"><a href="#embed-using-react-soon" aria-hidden="true" class="aal_anchor" id="embed-using-react-soon"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Embed using React (soon!)</h3>



<p>We will be releasing a React component for embedded Sandbox that you will be able to import from our <code>@apollo/sandbox</code> package in the near future. We will update this blog post with some example code when it’s available.</p>



<h2 class="wp-block-heading"><a href="#more-than-just-an-ide" aria-hidden="true" class="aal_anchor" id="more-than-just-an-ide"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>More than just an IDE</h2>



<p>We know there are a number of GraphQL IDEs to pick from these days&#8230; and we know we’re biased, but we’re particularly excited to bring Sandbox to you because it’s so much more than just an IDE.</p>



<h3 class="wp-block-heading"><a href="#saved-operations-in-the-cloud-%e2%98%81%ef%b8%8f" aria-hidden="true" class="aal_anchor" id="saved-operations-in-the-cloud-%e2%98%81%ef%b8%8f"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Saved operations (in the cloud) ☁️</h3>



<p>Over the years, we’ve met many developers who have told us they were scared to restart their computer or clear their browser cookies because they didn’t want to lose their queries in GraphiQL/Playground.</p>



<p>It’s 2022, and we figured that it’s about time for that to be a problem of the past. 🕰️</p>



<p>Connect your local Sandbox to your Studio account to <strong>save operations in the cloud</strong> and never worry about losing your work again.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="609" src="https://wp.apollographql.com/wp-content/uploads/2022/06/image4-opt-1024x609.png" alt="" class="wp-image-14169" srcset="https://wp.apollographql.com/wp-content/uploads/2022/06/image4-opt-1024x609.png 1024w, https://wp.apollographql.com/wp-content/uploads/2022/06/image4-opt-300x179.png 300w, https://wp.apollographql.com/wp-content/uploads/2022/06/image4-opt-768x457.png 768w, https://wp.apollographql.com/wp-content/uploads/2022/06/image4-opt-1536x914.png 1536w, https://wp.apollographql.com/wp-content/uploads/2022/06/image4-opt-1200x714.png 1200w, https://wp.apollographql.com/wp-content/uploads/2022/06/image4-opt.png 1600w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading"><a href="#schema-diffs-checks" aria-hidden="true" class="aal_anchor" id="schema-diffs-checks"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Schema diffs &amp; checks</h3>



<p>Have you ever worked with a schema so large it was distributed across multiple files or maybe even multiple repos? What about a GraphQL server that generates its schema from code and doesn’t even have an SDL file?</p>



<p>When developing graphs, sometimes all you want is a simple schema diff. But due to the implementation details of our graphs, that’s not always easy to accomplish. So we built it right into Sandbox.</p>



<p>You can diff your local schema against any graph in Apollo Studio, and if the changes look good, you can even run <a href="https://www.apollographql.com/docs/studio/schema-checks">schema checks</a> from Sandbox to make sure they pass CI before checking them into code.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="609" src="https://wp.apollographql.com/wp-content/uploads/2022/06/image2-opt-1024x609.png" alt="" class="wp-image-14161" srcset="https://wp.apollographql.com/wp-content/uploads/2022/06/image2-opt-1024x609.png 1024w, https://wp.apollographql.com/wp-content/uploads/2022/06/image2-opt-300x179.png 300w, https://wp.apollographql.com/wp-content/uploads/2022/06/image2-opt-768x457.png 768w, https://wp.apollographql.com/wp-content/uploads/2022/06/image2-opt-1536x914.png 1536w, https://wp.apollographql.com/wp-content/uploads/2022/06/image2-opt-1200x714.png 1200w, https://wp.apollographql.com/wp-content/uploads/2022/06/image2-opt.png 1600w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading"><a href="#automatic-schema-reference" aria-hidden="true" class="aal_anchor" id="automatic-schema-reference"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Automatic schema reference</h3>



<p>One of the best properties of GraphQL is that it’s self-documenting. We’ve always felt like squashing graph docs alongside a query IDE just didn’t do enough justice to the act of exploring the graph or referencing something in particular. That’s why we built a full-fledged automatic schema reference tool in Studio.</p>



<p>Sandbox also comes with Studio’s schema reference tool:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="609" src="https://wp.apollographql.com/wp-content/uploads/2022/06/image1-optimized-1024x609.png" alt="" class="wp-image-14163" srcset="https://wp.apollographql.com/wp-content/uploads/2022/06/image1-optimized-1024x609.png 1024w, https://wp.apollographql.com/wp-content/uploads/2022/06/image1-optimized-300x179.png 300w, https://wp.apollographql.com/wp-content/uploads/2022/06/image1-optimized-768x457.png 768w, https://wp.apollographql.com/wp-content/uploads/2022/06/image1-optimized-1536x914.png 1536w, https://wp.apollographql.com/wp-content/uploads/2022/06/image1-optimized-1200x714.png 1200w, https://wp.apollographql.com/wp-content/uploads/2022/06/image1-optimized.png 1600w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading"><a href="#apollo-explorer" aria-hidden="true" class="aal_anchor" id="apollo-explorer"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Apollo Explorer</h3>



<p>And of course, Sandbox has the Apollo Explorer and every feature we’ve built into it over the last several years.<a href="https://www.apollographql.com/docs/studio/explorer/explorer"> Explorer</a> is by far the most sophisticated GraphQL IDE in the ecosystem.</p>



<p>We love Explorer so much because it’s not just a playground for you to query graphs, it’s a playground for us as developers to build the things we always felt were missing from GraphQL tooling. As developers, there’s so much power we’ve gotten used to having in our IDEs and the GraphQL DX is still catching up in a lot of ways. We get new ideas every week about how to improve the Explorer just from using it ourselves.</p>



<p>Explorer has become a passion project of ours, and it is our expression of love for the GraphQL DX itself.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="609" src="https://wp.apollographql.com/wp-content/uploads/2022/06/image3-opt-1024x609.png" alt="" class="wp-image-14165" srcset="https://wp.apollographql.com/wp-content/uploads/2022/06/image3-opt-1024x609.png 1024w, https://wp.apollographql.com/wp-content/uploads/2022/06/image3-opt-300x179.png 300w, https://wp.apollographql.com/wp-content/uploads/2022/06/image3-opt-768x457.png 768w, https://wp.apollographql.com/wp-content/uploads/2022/06/image3-opt-1536x914.png 1536w, https://wp.apollographql.com/wp-content/uploads/2022/06/image3-opt-1200x714.png 1200w, https://wp.apollographql.com/wp-content/uploads/2022/06/image3-opt.png 1600w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p><strong>That’s all for now folks!</strong></p>



<p>We’re very happy to be bringing this to you today. It’s the culmination of a couple of years of dreaming within the Apollo zoom tunnels, now turned into reality. We’d love to see what you do with Sandbox and where you take your graphs. ❤️</p>



<p>Tweet at us and share what you build! 🐦</p>



<p>As always, happy querying 👋 </p>


How to use Apollo Sandbox on your localhost

How to embed Explorer for a private graph


<p><strong>Embed private graphs, use embeds to invite new users, and use improved Apollo Client Dev Tools.</strong></p>



<p>Explorer is an incredible GraphQL IDE that makes it quick and easy to browse schemas and run operations against them. It’s so awesome, that our community asked us to make it embeddable so that it could be used anywhere – and last year, <a href="https://www.apollographql.com/blog/announcement/platform/embed-apollo-explorer-anywhere/">we did just that</a>! But at the time, you could only embed public graph variants. Now, we are happy to announce that you can embed Explorer on <strong>any website</strong> with <strong>any graph variant</strong> – even private variants!&nbsp;</p>



<p>You can provide the experience of Explorer on any of your internal or external documentation, dev portals, and websites to onboard new consumers to your graphs.</p>



<h2 class="wp-block-heading"><a href="#embedding-the-explorer-graphql-ide" aria-hidden="true" class="aal_anchor" id="embedding-the-explorer-graphql-ide"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>Embedding the Explorer GraphQL IDE</strong></h2>



<p>To embed Explorer for a specific graph, first open Explorer for that graph in Apollo Studio. Click on the chevron next to the share icon in the editor pane and select “Share as embed”. This will open a modal that gives you a few different options for embedding.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="235" src="https://wp.apollographql.com/wp-content/uploads/2022/06/image1-1024x235.png" alt="" class="wp-image-14019" srcset="https://wp.apollographql.com/wp-content/uploads/2022/06/image1-1024x235.png 1024w, https://wp.apollographql.com/wp-content/uploads/2022/06/image1-300x69.png 300w, https://wp.apollographql.com/wp-content/uploads/2022/06/image1-768x176.png 768w, https://wp.apollographql.com/wp-content/uploads/2022/06/image1-1536x352.png 1536w, https://wp.apollographql.com/wp-content/uploads/2022/06/image1-1200x275.png 1200w, https://wp.apollographql.com/wp-content/uploads/2022/06/image1-1980x454.png 1980w, https://wp.apollographql.com/wp-content/uploads/2022/06/image1.png 1999w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>💡Embedded Explorer uses the graph ref from Apollo Studio. Since your graph is registered in Studio, embedded Explorer is always kept up to date with the schema changes in Studio. You can take your schema anywhere by embedding Explorer while Studio’s registry acts as its single source of truth behind the scenes. How neat is that?!</p>



<h3 class="wp-block-heading"><a href="#how-does-embedded-explorer-work-for-private-graph-variants" aria-hidden="true" class="aal_anchor" id="how-does-embedded-explorer-work-for-private-graph-variants"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>How does embedded Explorer work for private graph variants?</h3>



<p>If the graph variant you want to embed isn’t public (meaning it’s gated behind Studio authentication), then the embedded Explorer will request the visitor to authorize access before proceeding.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1425" height="861" src="https://wp.apollographql.com/wp-content/uploads/2022/06/image2.gif" alt="" class="wp-image-14021"/></figure>



<p>If the visitor has never interacted with Apollo Studio before &#8211; no problem! They can sign up and be invited from the embed itself.</p>



<p>If your Studio org is using SSO, users are invited with the role that is default selected for your org.&nbsp;</p>



<p>Otherwise, while copying the embed code from the modal in Apollo Studio, admins can configure whether they would like to invite visitors to the organization and select the role to invite with.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1431" height="791" src="https://wp.apollographql.com/wp-content/uploads/2022/06/image3.gif" alt="" class="wp-image-14023"/></figure>



<h3 class="wp-block-heading"><a href="#share-operation-collections-with-embedded-explorer" aria-hidden="true" class="aal_anchor" id="share-operation-collections-with-embedded-explorer"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Share operation collections with embedded Explorer</h3>



<p>As the person embedding Explorer, graph producers can <a href="https://www.apollographql.com/blog/announcement/platform/save-and-share-your-graphql-operations-in-apollo-explorer/">share collections of example operations</a> to get their consumers started. Any collection in the “Shared” workspace will be available as default once the embedded Explorer is made available. Visitors can also create their personal collections by signing in.</p>



<h2 class="wp-block-heading"><a href="#improved-explorer-in-apollo-client-dev-tools" aria-hidden="true" class="aal_anchor" id="improved-explorer-in-apollo-client-dev-tools"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>Improved Explorer in Apollo Client Dev Tools</strong></h2>



<p>With this release, we have also improved the Apollo Client Dev Tools by enabling it to securely pull in a graph ref from Apollo Studio if it is unable to introspect the graph from the browser.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="800" height="500" src="https://wp.apollographql.com/wp-content/uploads/2022/06/dev-tools-embed.gif" alt="" class="wp-image-14025"/></figure>



<h2 class="wp-block-heading"><a href="#start-embedding-your-graphs-with-explorer-today" aria-hidden="true" class="aal_anchor" id="start-embedding-your-graphs-with-explorer-today"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>Start embedding your graphs with Explorer today!</strong></h2>



<p>Sharing graphs with a broader audience using Apollo Explorer’s amazing experience could not get any easier. <a href="https://studio.apollographql.com/sandbox/explorer?endpoint=https%3A%2F%2Fapi.spacex.land%2Fgraphql%2F&amp;explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QEcYIE4CeABADICGMSUAFggM5HAA6SRRANhVbQ862xy40A%2BgQRk8LAUTgBLOnVkQkwpGURSiAXxZaQAGhAA3CbLIAjdvQwgQWoA">Head over to Apollo Studio</a> and get started! For detailed instructions on embedding Explorer, check out the <a href="https://www.apollographql.com/docs/studio/explorer/embed-explorer/">docs</a>. As always, we love hearing from you, so if you have any feedback, please drop a post on the <a href="https://github.com/apollographql/apollo-studio-community/issues">Apollo Studio GitHub Community</a>!</p>



<p><strong>⚠️  Note</strong>: Make sure you are on the latest version of the UI. Click on the bell icon at the top right corner of Studio and if you see “Update available, click to relaunch” at the bottom left of the modal then click that to get the latest version.</p>


Improved embedding for Apollo Explorer!


<p>Intrigued? We hope so! We recently introduced three of the most requested features from our developer community &#8211; tabs in Explorer, offline support for local development in Sandbox, and an improved integration experience between VS Code and Apollo Studio. The request for tabs in Explorer, especially, has been overwhelming:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="322" src="https://wp.apollographql.com/wp-content/uploads/2021/10/image-3-1024x322.png" alt="" class="wp-image-9472" srcset="https://wp.apollographql.com/wp-content/uploads/2021/10/image-3-1024x322.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/10/image-3-300x94.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/10/image-3-768x242.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/10/image-3.png 1068w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>We even dedicated a Slack emoji to it!</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://wp.apollographql.com/wp-content/uploads/2021/10/tab-msg.gif" alt="" class="wp-image-9474" width="600" height="199"/></figure>



<h2 class="wp-block-heading"><a href="#1-tabs-in-explorer" aria-hidden="true" class="aal_anchor" id="1-tabs-in-explorer"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>1. Tabs in Explorer</strong></h2>



<p>Need I say more? Test out <a href="https://www.apollographql.com/blog/tooling/graphql-ide/the-5-most-useful-features-of-apollo-studio-explorer-that-you-didnt-know-existed/#:~:text=1.%20Multiple%20operations">multiple operations in the same tab</a> or multiple operations in different tabs when exploring your GraphQL endpoint in Explorer! Testing and managing multiple operations in Explorer could not get any easier.&nbsp;</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1435" height="788" src="https://wp.apollographql.com/wp-content/uploads/2022/01/Screen-Recording-2022-01-27-at-10.53.12-AM.gif" alt="" class="wp-image-11987"/></figure>



<h2 class="wp-block-heading"><a href="#2-offline-support-for-local-development-in-sandbox" aria-hidden="true" class="aal_anchor" id="2-offline-support-for-local-development-in-sandbox"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>2. Offline support for local development in Sandbox</strong></h2>



<p>We launched <a href="https://www.apollographql.com/blog/announcement/platform/apollo-sandbox-an-open-graphql-ide-for-local-development/">Apollo Sandbox</a> three months ago. And now, we are making it available offline for local development. Flaky internet? Worry no more! If you are developing <em>locally</em> using Sandbox, you can continue to work without any internet connection.&nbsp;</p>



<p>⚠️ <strong>Note:</strong> you’ll need to load at least one Sandbox tab while you’re connected to the internet to update to the latest bundle, but after that, you can continue to work without any internet connection.</p>



<h2 class="wp-block-heading"><a href="#3-run-operations-in-apollo-studio-from-vscode" aria-hidden="true" class="aal_anchor" id="3-run-operations-in-apollo-studio-from-vscode"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>3. Run operations in Apollo Studio from VSCode</strong></h2>



<p>The final feature that we recently added is the “Run in Studio” button in our <a href="https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo">VS Code extension</a>. There is now a hover on the play button in VS Code, which opens the exact operation and fragments that you want to test in Apollo Studio Explorer, saving you dozens of clicks and the tedious task of setting up an operation to test!</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1266" height="877" src="https://wp.apollographql.com/wp-content/uploads/2021/10/Screen-Recording-2021-09-23-at-08.29.42-PM.gif" alt="" class="wp-image-9446"/></figure>



<h2 class="wp-block-heading"><a href="#get-started" aria-hidden="true" class="aal_anchor" id="get-started"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>Get Started!</strong></h2>



<p>So what are you waiting for? All these features are now available in Apollo Studio Explorer and Apollo Sandbox. <a href="https://studio.apollographql.com/sandbox/explorer?endpoint=https%3A%2F%2Fapi.spacex.land%2Fgraphql%2F&amp;explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QEcYIE4CeABADICGMSUAFggM5HAA6SRRANhVbQ862xy40A%2BgQRk8LAUTgBLOnVkQkwpGURSiAXxZaQAGhAA3CbLIAjdvQwgQWoA">Head over there</a> and try them out! And as always, we love hearing from you, so if you have any feedback, please drop a post on the <a href="https://github.com/apollographql/apollo-studio-community/issues">Apollo Studio GitHub Community</a>!</p>


We’re shipping 3 of our most requested features!


<p>Apollo Studio Explorer is the most powerful web IDE for creating, running, and managing GraphQL operations. Since launching it over a year ago, we’ve added many new features to Explorer to help you navigate your schema and build queries more intelligently than ever before. To help you get the maximum value out of Explorer, we polled a number of developers from the GraphQL community and compiled a list of the top 5 most useful features you may have missed.</p>



<p>Let’s take a look at each.</p>



<h2 class="wp-block-heading"><a href="#1-multiple-operations" aria-hidden="true" class="aal_anchor" id="1-multiple-operations"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Multiple operations</h2>



<p>Did you know that the operations editor can manage multiple operations individually? As you work, the editor shifts focus to whichever operation you click into and updates the run button accordingly. Each operation also has its own context menu (&#8220;<strong>&#8230;</strong>&#8220;) offering various tools specifically for that operation. This makes it easier than ever to manage and test all of your operations independently in a single tab!</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1414" height="768" src="https://wp.apollographql.com/wp-content/uploads/2021/08/multiple-operations.gif" alt="" class="wp-image-8345"/></figure>



<h2 class="wp-block-heading"><a href="#2-table-layout-for-response-data" aria-hidden="true" class="aal_anchor" id="2-table-layout-for-response-data"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Table layout for response data</h2>



<p>You can view an operation&#8217;s response as JSON or as a table. Table layout is especially useful when your response includes an array, or when you want to share a query&#8217;s results with someone who isn&#8217;t familiar with JSON. When looking at arrays of data in table mode, you can click the header of any column of data to sort your array by that column&#8217;s values.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1433" height="743" src="https://wp.apollographql.com/wp-content/uploads/2021/08/tablemode.gif" alt="" class="wp-image-8347"/></figure>



<h2 class="wp-block-heading"><a href="#3-editor-hints" aria-hidden="true" class="aal_anchor" id="3-editor-hints"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Editor hints</h2>



<p>Under Explorer settings, you can toggle on/off Editor hints to view metadata for each of your operation’s fields, right aligned in the editor. You can toggle any of the following three hints to be displayed:</p>



<ul class="wp-block-list"><li><strong>Response hints:</strong> When toggled on while building your query, the Explorer runs partial queries under the hood and shows their results in-line. This is helpful when you want to get a sense of the data you&#8217;ll get back in your full operation response. It can also help you retrieve a quick answer to a query without needing to click the Run button.</li><li><strong>Subgraph source:</strong> For a federated graph, you can see which subgraph each field in the operation is sourced from.</li><li><strong>Field latency approximations:</strong> The Explorer shows you the 95th-percentile (default) response times for the fields in your query to help you get a sense of how &#8220;expensive&#8221; your query is and what the bottlenecks in response time will be. You can change which percentile you want to see hints from at any time in the Explorer settings.</li></ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1003" height="656" src="https://wp.apollographql.com/wp-content/uploads/2021/08/editorhints.gif" alt="" class="wp-image-8349"/></figure>



<h2 class="wp-block-heading"><a href="#4-copy-link-to-operation" aria-hidden="true" class="aal_anchor" id="4-copy-link-to-operation"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Copy link to operation</h2>



<p>One of our favorite features! This enables you to share with each other the link to the exact operation. Click on the context menu (“…”) at the top of the operation to copy the link that can be used for sharing. Paste the link on a web browser and voila! Explorer with the exact operation is ready to be executed.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1411" height="841" src="https://wp.apollographql.com/wp-content/uploads/2021/08/copy-link-to-operation.gif" alt="" class="wp-image-8351"/></figure>



<h2 class="wp-block-heading"><a href="#5-inline-extract-variables" aria-hidden="true" class="aal_anchor" id="5-inline-extract-variables"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>5. Inline/Extract variables</h2>



<p>While editing your operations, you can toggle between inline or extracted notation for variables. This is useful when you want to switch notations to copy and paste something, or when you&#8217;re drafting a query in the editor and want to move it to your code.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="487" height="553" src="https://wp.apollographql.com/wp-content/uploads/2021/08/inline-extract-var.gif" alt="" class="wp-image-8359"/></figure>



<h2 class="wp-block-heading"><a href="#get-started-with-explorer" aria-hidden="true" class="aal_anchor" id="get-started-with-explorer"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Get started with Explorer</h2>



<p>We can’t wait to see what you’ll build with all of the amazing features that Explorer has to offer! If you’re already an Apollo user, you can access all of these features right now by opening Explorer in <a href="https://studio.apollographql.com/login">Apollo Studio</a>. Or, if you’re new to Apollo and not quite ready to create a Studio account, you can start using much of what Explorer has to offer in <a href="https://studio.apollographql.com/sandbox/explorer">Apollo Sandbox</a>.</p>


The 5 most useful features of Apollo Studio Explorer that you didn’t know existed


<p>When building out APIs on the web, we&#8217;ll often find ourselves in the situation where we need to quickly verify that the route or API call we just created works the way we intend it to.</p>



<p>If you&#8217;re not using <a href="https://studio.apollographql.com/dev?referrer=blog">Apollo Explorer</a> to test your GraphQL API (our free GraphQL IDE in Apollo Studio), another option is Postman. It works as a great tool for testing <em>any</em> HTTP endpoint &#8211; that means GraphQL too.</p>



<p>In this short post, we&#8217;ll walk through how to manually test your GraphQL API using Postman.</p>



<h2 class="wp-block-heading"><a href="#getting-started" aria-hidden="true" class="aal_anchor" id="getting-started"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Getting started</h2>



<h3 class="wp-block-heading"><a href="#prerequistes" aria-hidden="true" class="aal_anchor" id="prerequistes"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Prerequistes</h3>



<ul class="wp-block-list">
<li>You have Git installed</li>



<li>You have NPM and Node.js (8+) installed</li>



<li>You have the Postman Agent installed or a Postman account</li>



<li>You understand the basics of GraphQL (you can read &#8220;<a href="https://www.apollographql.com/blog/what-is-graphql-graphql-introduction/">What is GraphQL? GraphQL Introduction</a>&#8221; to get up to speed)</li>
</ul>



<h3 class="wp-block-heading"><a href="#clone-install-and-start-the-server" aria-hidden="true" class="aal_anchor" id="clone-install-and-start-the-server"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Clone, install, and start the server</h3>



<p>We&#8217;re going to use the discography example from <a href="https://github.com/apollographql/apollo-server-starter">apollo-server-starter</a>.</p>



<p>To pull the code from GitHub and start the server, paste the following command into a terminal on your machine.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-bash">git clone https://github.com/apollographql/apollo-server-starter
cd apollo-server-starter 
npm install &amp;&amp; npm run start:example discography</code></pre>



<p>If you see the following, your server is up and running:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-bash">🚀 Server ready at http://localhost:4000/</code></pre>



<h3 class="wp-block-heading"><a href="#review-the-schema" aria-hidden="true" class="aal_anchor" id="review-the-schema"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Review the schema</h3>



<p>Let&#8217;s review our schema before we get into it. In the discography schema, you&#8217;ll find definitions for albums, tracks, and artists — and two queries that return either all albums, or a specific one.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">enum Genre {
  Pop,
  Rock,
  Alternative
  HipHop
}

type Track {
  title: String!
  number: Int!
}

type Artist {
  name: String!
}

type Album {
  title: String!
  artist: Artist!
  tracks: [Track!]!
  genre: Genre!
}

type Query {
  albums(genre: Genre): [Album!]!
  album(title: String!): Album
}</code></pre>



<h2 class="wp-block-heading"><a href="#writing-a-graphql-request-with-postman" aria-hidden="true" class="aal_anchor" id="writing-a-graphql-request-with-postman"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Writing a GraphQL Request with Postman</h2>



<p>The first query we&#8217;ll write is one that <strong>fetches</strong> <strong>all albums</strong>.</p>



<p>We begin by opening postman and selecting the option to write a new query.</p>



<p>Next, we begin the query by first writing the URL of the request. In our case, that&#8217;ll be @ <code>http://localhost:4000/</code>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1025" height="336" src="https://wp.apollographql.com/wp-content/uploads/2021/03/Screen_Shot_2021-03-17_at_6.37.17_PM.png" alt="" class="wp-image-6824" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/Screen_Shot_2021-03-17_at_6.37.17_PM.png 1025w, https://wp.apollographql.com/wp-content/uploads/2021/03/Screen_Shot_2021-03-17_at_6.37.17_PM-300x98.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/03/Screen_Shot_2021-03-17_at_6.37.17_PM-768x252.png 768w" sizes="auto, (max-width: 1025px) 100vw, 1025px" /></figure>



<p>Then, we&#8217;ll change the method to POST — this is necessary since all GraphQL operations work on top of the HTTP POST method.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="351" src="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-post-1024x351.png" alt="" class="wp-image-6826" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-post-1024x351.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-post-300x103.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-post-768x263.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-post.png 1026w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>And then we&#8217;ll formulate the body of the request.</p>



<p>Click the selection that says <em>Body</em> and then choose <em>GraphQL</em> in the selection list below it. You&#8217;ll be presented with a <em>Query</em> and a <em>GraphQL Variables</em> window.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="457" src="https://wp.apollographql.com/wp-content/uploads/2021/03/Screen_Shot_2021-03-17_at_6.38.45_PM-1024x457.png" alt="" class="wp-image-6828" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/Screen_Shot_2021-03-17_at_6.38.45_PM-1024x457.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/03/Screen_Shot_2021-03-17_at_6.38.45_PM-300x134.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/03/Screen_Shot_2021-03-17_at_6.38.45_PM-768x343.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/03/Screen_Shot_2021-03-17_at_6.38.45_PM.png 1026w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Within this <em>Query</em> window, let&#8217;s write our query. Write or paste this code into it.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query GetAllAlbums {
  albums {
    title 
    artist {
      name
    }
    tracks {
      title 
      number
    }
    genre
  }
}</code></pre>



<p>Finally, let&#8217;s click the blue <em>Send</em> button at the top right.</p>



<p>It all goes well, you should see the query results in the Response window at the bottom of the page.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="619" src="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-request-1024x619.png" alt="" class="wp-image-6830" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-request-1024x619.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-request-300x181.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-request-768x464.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-request.png 1077w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>That&#8217;s how you write GraphQL queries using Postman!</p>



<h3 class="wp-block-heading"><a href="#including-variables" aria-hidden="true" class="aal_anchor" id="including-variables"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Including variables</h3>



<p>Just as often as we need to write queries that return data, we need to pass in variables to apply sorting and filtering through our data so that we can see relevant data.</p>



<p>To add GraphQL variables, we use the window of the same title on the right hand side.</p>



<p>Let&#8217;s use the <code>albums(genre: Genre!)</code> query and filter in on the list of albums by a particular genre.</p>



<p>First, we modify the query by giving it the the <em>Variable Definitions</em> necessary to make this query. Paste the following into the Query window.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query GetAllAlbums ($genre: Genre) {
  albums (genre: $genre) {
    title 
    artist {
      name
    }
    tracks {
      title 
      number
    }
    genre
  }
}</code></pre>



<p>Then, in the GraphQL Variables window, we need to supply it with the data that we want to use as arguments.</p>



<p>Let&#8217;s filter in on albums with the <code>HipHop</code> genre. Paste the following into the GraphQL Variables window.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-json">{
    &quot;genre&quot;: &quot;HipHop&quot;
}</code></pre>



<p>Your windows should look like this:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="510" src="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-looks.png" alt="" class="wp-image-6832" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-looks.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-looks-300x149.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-looks-768x383.png 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>And when you&#8217;re ready, click the blue <em>Send</em> button again.</p>



<p>Looking at the results in the <em>Response</em> window at the bottom, it looks like we only got a single album back: &#8220;<em>Paul&#8217;s Boutique</em>&#8221; (good album 👍 ).</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1017" height="621" src="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-paul.png" alt="" class="wp-image-6834" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-paul.png 1017w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-paul-300x183.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-postman-paul-768x469.png 768w" sizes="auto, (max-width: 1017px) 100vw, 1017px" /></figure>



<p>And that&#8217;s all there is to it.</p>



<h2 class="wp-block-heading"><a href="#conclusion" aria-hidden="true" class="aal_anchor" id="conclusion"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Conclusion</h2>



<p>When you&#8217;re building out your GraphQL API, it&#8217;s a good idea to use a GraphQL IDE to test out your GraphQL operations. Keeping those feedback loops tight helps so that you can verify that things are working the way they should be. And since GraphQL works on top of HTTP, you can use Postman to manually test your API.</p>



<h3 class="wp-block-heading"><a href="#get-started-with-apollo-explorer" aria-hidden="true" class="aal_anchor" id="get-started-with-apollo-explorer"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Get started with Apollo Explorer</h3>



<p><a href="https://studio.apollographql.com/dev?referrer=blog">Apollo Explorer</a> is a free cloud GraphQL IDE that we built from the ground up, <strong>specifically for GraphQL developers</strong>.</p>



<p>The Explorer comes with productivity-boosting features like one-click query building, intelligent search, and the ability to extract variables and fragments.</p>



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" decoding="async" width="954" height="544" src="https://wp.apollographql.com/wp-content/uploads/2021/03/point-and-click.gif" alt="" class="wp-image-6836"/></figure>



<p>Apollo Explorer also comes with <a href="https://www.apollographql.com/docs/studio/dev-graphs/">development graphs</a>, which enables you to build, test, and document your schema changes locally, as well as preview graph changes in local branches and PRs.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="354" src="https://wp.apollographql.com/wp-content/uploads/2021/03/apollo-studio-apollo-explorer-1.png" alt="" class="wp-image-6840" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/apollo-studio-apollo-explorer-1.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/03/apollo-studio-apollo-explorer-1-300x104.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/03/apollo-studio-apollo-explorer-1-768x266.png 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>To use Apollo Explorer, head over to <a href="https://studio.apollographql.com/dev?referrer=blog">studio.apollographql.com/dev</a> to get started with your first development graph.</p>



<p>Happy querying!</p>


Tooling

How to use Apollo Sandbox on your localhost

How to embed Explorer for a private graph

Improved embedding for Apollo Explorer!

We’re shipping 3 of our most requested features!

The 5 most useful features of Apollo Studio Explorer that you didn’t know existed

How to use GraphQL with Postman – Postman testing with GraphQL

Tooling

How to use Apollo Sandbox on your localhost

How to embed Explorer for a private graph

Improved embedding for Apollo Explorer!

We’re shipping 3 of our most requested features!

The 5 most useful features of Apollo Studio Explorer that you didn’t know existed

How to use GraphQL with Postman – Postman testing with GraphQL

Stay in our orbit