Enhance customer experiences with Apollo GraphOS


<p class="wp-block-paragraph">When I first started learning about GraphQL, I thought that I needed a special tool to make GraphQL requests. Luckily, you don&#8217;t!</p>



<p class="wp-block-paragraph">While we recommend using Apollo Studio&#8217;s <a href="https://www.apollographql.com/blog/announcement/platform/apollo-sandbox-an-open-graphql-ide-for-local-development/">Sandbox</a>, since GraphQL runs on top of HTTP, it&#8217;s possible to make GraphQL requests using any of the tools you were accustomed to using building out your apps with REST.</p>



<p class="wp-block-paragraph">In this post, we&#8217;ll learn how to make GraphQL requests over HTTP with just GET and POST methods. We&#8217;ll also discuss the limitations of each approach.</p>



<h2 class="wp-block-heading"><a href="#prerequisites" aria-hidden="true" class="aal_anchor" id="prerequisites"><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>Prerequisites</h2>



<ul class="wp-block-list"><li>You know <a href="https://www.apollographql.com/blog/graphql/basics/what-is-graphql-introduction/">what GraphQL is</a></li><li>You know <a href="https://www.apollographql.com/blog/graphql/basics/mutation-vs-query-when-to-use-graphql-mutation/">the difference between a query and a mutation</a></li><li>You&#8217;re familiar with <a href="https://www.apollographql.com/docs/apollo-server/getting-started/">the basics of Apollo Server</a> and have completed the getting started guide</li></ul>



<h2 class="wp-block-heading"><a href="#an-apollo-server-example" aria-hidden="true" class="aal_anchor" id="an-apollo-server-example"><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>An Apollo Server example</h2>



<p class="wp-block-paragraph">Let&#8217;s assume we have a basic Apollo Server that returns a greeting with an optional <code class="" data-line="">name</code> variable:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript" data-line="">const { ApolloServer, gql } = require(&#039;apollo-server&#039;);

const resolvers = {
  Query: {
    hello: (_, args) =&gt; {
      let value;
      if (args.name) {
        value = `Hello ${args.name}, nice to meet you!`
      } else {
        value = `Hello, nice to meet you!`
      }
      return { value }
    }
  }
}

const typeDefs = gql`
  type Hello {
    value: String
  }

  type Query {
    hello(name: String): Hello
  }
`

const server = new ApolloServer({
  resolvers,
  typeDefs
})

server.listen().then(({ port }) =&gt; {
  console.log(`Server started on port: ${port}`)
})
﻿</code></pre>



<p class="wp-block-paragraph">Apollo Server accepts either POST or GET HTTP methods as GraphQL requests. Let&#8217;s start with the POST method.</p>



<h2 class="wp-block-heading"><a href="#making-graphql-requests-using-the-post-method" aria-hidden="true" class="aal_anchor" id="making-graphql-requests-using-the-post-method"><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>Making GraphQL requests using the POST method</h2>



<p class="wp-block-paragraph">To make a GraphQL request using the POST HTTP method, we pass the following properties into the JSON body of the request.</p>



<ul class="wp-block-list"><li><code class="" data-line="">query</code> — the full <a href="https://www.apollographql.com/blog/graphql/basics/the-anatomy-of-a-graphql-query/">GraphQL query</a> containing the operation type (can be either <code class="" data-line="">query</code> or <code class="" data-line="">mutation</code>), the types &amp; fields requested, and any variables included</li><li><code class="" data-line="">operationName</code> — optional, but if included, <em>must</em> be present in the <code class="" data-line="">query</code></li><li><code class="" data-line="">variables</code> — optional <em>if</em> there are no variables included in the <code class="" data-line="">query</code></li></ul>



<p class="wp-block-paragraph">Here&#8217;s an example of a GraphQL request including an <code class="" data-line="">operationName</code> and <code class="" data-line="">variables</code>.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-json" data-line="">{
  &quot;query&quot;: &quot;query GreetingQuery ($arg1: String) { hello (name: $arg1) { value } }&quot;,
  &quot;operationName&quot;: &quot;GreetingQuery&quot;,
  &quot;variables&quot;: { &quot;arg1&quot;: &quot;Timothy&quot; }
}</code></pre>



<p class="wp-block-paragraph">We&#8217;d expect to see a response like the following:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-json" data-line="">{
    &quot;data&quot;: {
        &quot;hello&quot;: {
            &quot;value&quot;: &quot;Hello Timothy, nice to meet you!&quot;
        }
    }
}</code></pre>



<h2 class="wp-block-heading"><a href="#making-a-graphql-requests-using-the-get-method" aria-hidden="true" class="aal_anchor" id="making-a-graphql-requests-using-the-get-method"><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>Making a GraphQL requests using the GET method</h2>



<p class="wp-block-paragraph">You can also make GraphQL requests using the GET HTTP method. The rules for making GraphQL requests this way are almost the same as the POST version — there are just slight differences:</p>



<ul class="wp-block-list"><li>Each property is provided as an HTTP query parameter (values separated by an ampersand — <code class="" data-line="">&amp;</code>)</li><li><strong>Limitation (variables):</strong> Because they need to be parsed as JSON, GraphQL requests with variables don&#8217;t work in GET requests.</li><li><strong>Limitation (operations)</strong>: You can only execute <code class="" data-line="">query</code> operations (<code class="" data-line="">mutation</code> operations don&#8217;t work)</li></ul>



<p class="wp-block-paragraph">That said, the following request works nicely!</p>



<pre class="wp-block-code"><code class="" data-line="">GET http://localhost:4000/?query=query GreetingQuery { hello { value } }&amp;operationName=GreetingQuery</code></pre>



<p class="wp-block-paragraph">Which, when encoded for the web, looks like:</p>



<pre class="wp-block-code"><code class="" data-line="">GET http://localhost:4000/?query=query%20GreetingQuery%20{%20hello%20{%20value%20}%20}&amp;operationName=GreetingQuery</code></pre>



<p class="wp-block-paragraph">We could expect a response like the following.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-json" data-line="">{
    &quot;data&quot;: {
        &quot;hello&quot;: {
            &quot;value&quot;: &quot;Hello, nice to meet you!&quot;
        }
    }
}</code></pre>



<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 class="wp-block-paragraph">In this post, we discussed how you can use HTTP GET and POST methods to send GraphQL requests. We also looked at some of the nuances and limitations of each approach.</p>



<p class="wp-block-paragraph">If you&#8217;re just getting started with Apollo Server, you&#8217;ll see a screen similar to the following when you visit your running server in the browser.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="962" src="https://wp.apollographql.com/wp-content/uploads/2021/08/Screen-Shot-2021-08-19-at-3.00.48-PM-1024x962.png" alt="" class="wp-image-8880" srcset="https://wp.apollographql.com/wp-content/uploads/2021/08/Screen-Shot-2021-08-19-at-3.00.48-PM-1024x962.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/08/Screen-Shot-2021-08-19-at-3.00.48-PM-300x282.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/08/Screen-Shot-2021-08-19-at-3.00.48-PM-768x721.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/08/Screen-Shot-2021-08-19-at-3.00.48-PM-1536x1442.png 1536w, https://wp.apollographql.com/wp-content/uploads/2021/08/Screen-Shot-2021-08-19-at-3.00.48-PM-2048x1923.png 2048w, https://wp.apollographql.com/wp-content/uploads/2021/08/Screen-Shot-2021-08-19-at-3.00.48-PM-1200x1127.png 1200w, https://wp.apollographql.com/wp-content/uploads/2021/08/Screen-Shot-2021-08-19-at-3.00.48-PM-1980x1859.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">Clicking &#8220;Query your server&#8221; takes you to Apollo Studio&#8217;s sandbox and gives you an environment where you can quickly navigate and test out your GraphQL server. While you can use other tools, we recommend Sandbox as the best way to get started.</p>



<hr class="wp-block-separator"/>



<p class="wp-block-paragraph">For demonstrations of other ways to make GraphQL requests, read &#8220;<a href="https://www.apollographql.com/blog/graphql/examples/4-simple-ways-to-call-a-graphql-api/">4 Simple ways to Call a GraphQL API</a>&#8220;.</p>



<p class="wp-block-paragraph">For more on sending GraphQL requests with HTTP, read &#8220;<a href="https://www.apollographql.com/docs/apollo-server/requests/">POST and GET format — How to send requests to Apollo Server over HTTP</a>&#8221; from the official Apollo Server docs.</p>


Making GraphQL Requests using HTTP Methods


<p class="wp-block-paragraph">GraphQL lets front-end developers simplify their data-fetching and state management approaches. For backend developers, GraphQL acts as a structured, maintainable API. To learn how GraphQL works across the stack, I recommend completing a fullstack GraphQL tutorial.</p>



<p class="wp-block-paragraph">In this short post, I&#8217;d like to share two GraphQL training resources that we created @ Apollo to help you ramp up and get comfortable building GraphQL applications from back to front.</p>



<h2 class="wp-block-heading"><a href="#%f0%9f%93%bd%ef%b8%8f-watch-learn-graphql-the-lift-off-series-on-odyssey-the-apollo-course-platform" aria-hidden="true" class="aal_anchor" id="%f0%9f%93%bd%ef%b8%8f-watch-learn-graphql-the-lift-off-series-on-odyssey-the-apollo-course-platform"><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>📽️ [Watch] Learn GraphQL &#8211; The lift-off series on Odyssey: the Apollo Course Platform</h2>



<p class="wp-block-paragraph">Earlier this year, we released <a href="http://odyssey.apollographql.com/?referrer=blog">Odyssey: the Apollo course platform</a>. We wanted to create a more directed, interactive, and fun learning experience for developers in search of practical training using GraphQL and Apollo.</p>



<p class="wp-block-paragraph">The first series of courses on Odyssey is called <strong>Lift-off</strong>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="960" height="645" src="https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled-1.png" alt="" class="wp-image-6871" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled-1.png 960w, https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled-1-300x202.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled-1-768x516.png 768w" sizes="auto, (max-width: 960px) 100vw, 960px" /></figure>



<h3 class="wp-block-heading"><a href="#what-youll-build" aria-hidden="true" class="aal_anchor" id="what-youll-build"><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>What you&#8217;ll build</h3>



<p class="wp-block-paragraph">In <em>Lift-off,</em> you&#8217;ll build a full-stack GraphQL example application called Catstronauts, a learning platform for adventurous cats who want to explore the universe!</p>



<p class="wp-block-paragraph">It contains list-view and detail-view pages of all the different courses.</p>



<h3 class="wp-block-heading"><a href="#features" aria-hidden="true" class="aal_anchor" id="features"><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>Features</h3>



<p class="wp-block-paragraph">In <em>Lift-off part I</em>, you&#8217;ll learn the core components of a full-stack GraphQL app, specifically:</p>



<ul class="wp-block-list">
<li>a schema first-approach to building web applications with GraphQL</li>



<li>GraphQL&#8217;s Schema Definition Language (SDL)</li>



<li>how to set up Apollo Server, test, and develop it using <a href="https://studio.apollographql.com/dev?referrer=blog">Apollo Explorer</a></li>



<li>how to connect to your GraphQL API from the front-end using Apollo Client and React</li>
</ul>



<p class="wp-block-paragraph">And in the second part of the series, you&#8217;ll learn:</p>



<ul class="wp-block-list">
<li>how to write more advanced queries and display data in the UI</li>



<li>how to use variables</li>



<li>how to mutate data and update the UI</li>
</ul>



<h3 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>Get started</h3>



<p class="wp-block-paragraph">Ready to start? Head on over to <a href="https://odyssey.apollographql.com/?referrer=blog">odyssey.apollographql.com</a>.</p>



<h2 class="wp-block-heading"><a href="#%f0%9f%93%96-read-learn-graphql-the-official-apollo-full-stack-graphql-tutorial" aria-hidden="true" class="aal_anchor" id="%f0%9f%93%96-read-learn-graphql-the-official-apollo-full-stack-graphql-tutorial"><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>📖 [Read] Learn GraphQL &#8211; The Official Apollo Full-stack GraphQL Tutorial</h2>



<p class="wp-block-paragraph">For those that prefer the written approach to learning, I recommend checking out the <a href="https://www.apollographql.com/docs/tutorial/introduction/">Official Apollo Full-stack GraphQL Tutorial</a> via the Apollo docs.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="738" height="1024" src="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-tutorial-space-explorer-738x1024.png" alt="" class="wp-image-6873" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-tutorial-space-explorer-738x1024.png 738w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-tutorial-space-explorer-216x300.png 216w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-tutorial-space-explorer-768x1066.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-tutorial-space-explorer.png 912w" sizes="auto, (max-width: 738px) 100vw, 738px" /></figure>



<h3 class="wp-block-heading"><a href="#what-youll-build-2" aria-hidden="true" class="aal_anchor" id="what-youll-build-2"><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>What you&#8217;ll build</h3>



<p class="wp-block-paragraph">In the written GraphQL tutorial, we build Space Explorer: an interactive app for reserving a seat on an upcoming SpaceX launch 🚀.</p>



<p class="wp-block-paragraph">It contains a login page, list and detail-view pages, user profiles, and a cart for setting up launches.</p>



<h3 class="wp-block-heading"><a href="#features-2" aria-hidden="true" class="aal_anchor" id="features-2"><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>Features</h3>



<p class="wp-block-paragraph">You&#8217;ll learn how to build a full-stack GraphQL application with <em>authentication, pagination, state management,</em> and more. Specifically, you&#8217;ll learn:</p>



<ul class="wp-block-list">
<li>How to build a GraphQL schema using Apollo Server, hook it to data, and then connect to it from a client-side React applications using Apollo Client</li>



<li>How to use Apollo Client and React to fetch and display GraphQL data</li>



<li>How to use Apollo Server to build a GraphQL API</li>



<li>How to source data from a REST API</li>



<li>How to source data from a database</li>
</ul>



<h3 class="wp-block-heading"><a href="#get-started-2" aria-hidden="true" class="aal_anchor" id="get-started-2"><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</h3>



<p class="wp-block-paragraph">If you&#8217;re ready to walk through and build Space Explorer, <a href="https://www.apollographql.com/docs/tutorial/introduction/">check out the tutorial via the Apollo docs here</a>.</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 class="wp-block-paragraph">There you have it — two great GraphQL tutorials to learn how to build fullstack apps. </p>


Learn GraphQL – Tutorials for Fullstack GraphQL

Building a GraphQL API – GraphQL API example

What is a GraphQL query? GraphQL query examples using Apollo Explorer


<p class="wp-block-paragraph">On this blog, we spend a lot of time pushing the limits of GraphQL and talking about some of the most advanced parts of the technology. However, GraphQL is inherently quite simple, and works just fine without any specialized tooling. So let’s demonstrate that by showing several very simple ways of calling a GraphQL API over HTTP.</p>



<h2 class="wp-block-heading" id="be67"><a href="#the-example-api" aria-hidden="true" class="aal_anchor" id="the-example-api"><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>The example API</h2>



<p class="wp-block-paragraph">For this post, we&#8217;ll rely on the simple <code class="" data-line="">todos</code> API from <a href="https://github.com/apollographql/ac3-state-management-examples">apollographql/ac3-state-management-examples</a>.</p>



<p class="wp-block-paragraph">Let&#8217;s clone the repo, install the dependencies, and start the server locally.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-bash" data-line="">git clone git@github.com:apollographql/ac3-state-management-examples.git
cd ac3-state-management-examples/apollo-remote-state/server
npm install
npm run start</code></pre>



<p class="wp-block-paragraph">If all goes well, you should see a message letting you know that your GraphQL server is up and running.</p>



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



<h2 class="wp-block-heading" id="e5a3"><a href="#1-using-graphql-ides-apollo-explorer" aria-hidden="true" class="aal_anchor" id="1-using-graphql-ides-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>1. Using GraphQL IDEs (Apollo Explorer)</h2>



<p class="wp-block-paragraph">GraphQL IDEs let you build queries, browse schemas, and test out GraphQL APIs.</p>



<p class="wp-block-paragraph"><a href="http://studio.apollographql.com/dev?referrer=blog" data-type="URL" data-id="http://studio.apollographql.com/dev?referrer=blog">Apollo Explorer</a> is a free cloud-based GraphQL IDE that comes with one-click query building, intelligent search, and a multitude of other productivity features to solve common pain-points we&#8217;ve heard from developers building apps with GraphQL.</p>



<p class="wp-block-paragraph">Getting started should be faster than making a pot of coffee.</p>



<p class="wp-block-paragraph">To use the explorer, we&#8217;ll head to <a href="http://studio.apollographql.com/dev?referrer=blog">studio.apollographql.com/dev</a> and create an account (using either GitHub or your email).</p>



<p class="wp-block-paragraph">Finally, choose a name for your graph, select the “Development” graph type, add your localhost endpoint (Apollo Server’s default is <a href="http://localhost:4000">http://localhost:4000</a>), and click “Create Graph”.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="935" src="https://wp.apollographql.com/wp-content/uploads/2020/12/Screen_Shot_2020-12-03_at_10.48.40_PM-1024x935.png" alt="" class="wp-image-6275" srcset="https://wp.apollographql.com/wp-content/uploads/2020/12/Screen_Shot_2020-12-03_at_10.48.40_PM-1024x935.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/12/Screen_Shot_2020-12-03_at_10.48.40_PM-300x274.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/12/Screen_Shot_2020-12-03_at_10.48.40_PM-768x701.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/12/Screen_Shot_2020-12-03_at_10.48.40_PM-1536x1402.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/12/Screen_Shot_2020-12-03_at_10.48.40_PM-1200x1095.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/12/Screen_Shot_2020-12-03_at_10.48.40_PM.png 1814w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">And that’s it! You’re ready to start querying.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="600" height="241" src="https://wp.apollographql.com/wp-content/uploads/2020/12/ezgif-4-e8f283a9e165.gif" alt="" class="wp-image-6343"/></figure>



<p class="wp-block-paragraph">Here&#8217;s a query you can use to get started. Paste this into the <em>Operations</em> window and click the blue button to run the query.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql" data-line="">query AllTodos {
  todos {
    edges {
      node {
        completed
        id
        text
      }
    }
  }
}</code></pre>



<p class="wp-block-paragraph">The Explorer is really useful! Not only is it easy to use, but we can see how long it took for the query to execute, download the responses, and keep track of all the operations you ran over time.</p>



<p class="wp-block-paragraph">I don&#8217;t want to give you the impression that you need a specialized tool to access data from your GraphQL API. You don&#8217;t 😇. Let’s go way back to basics.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph">By the way, some other GraphQL IDEs you can check out are: Graph<em>i</em>QL, GraphQL Playground, and Insomnia.</p>
</blockquote>



<h2 class="wp-block-heading" id="67d6"><a href="#2-curl" aria-hidden="true" class="aal_anchor" id="2-curl"><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. Curl</h2>



<p class="wp-block-paragraph">curl is one of the most popular tools for accessing HTTP endpoints from the command line. It’s often used as a lowest-common-denominator example for how to access an API without any programming language or specialized tooling. So let’s use it to fetch GraphQL data!</p>



<p class="wp-block-paragraph">Since curl is a command line tool, it’s easier to operate with queries that are just one line, so we’ll use the short one from above.&nbsp;Without further ado, here’s a curl command that will fetch a GraphQL query from our API:</p>



<pre class="wp-block-preformatted">curl \
-X POST \
-H "Content-Type: application/json" \
--data '{ "query": "{ todos { edges { node { id completed text } } } }" }' \
http://localhost:4000/</pre>



<p class="wp-block-paragraph">It specifies four things about our request:</p>



<ol class="wp-block-list">
<li><strong>The</strong> <code class="" data-line="">POST</code> <strong>HTTP verb</strong>, which is the most common one used by GraphQL APIs (although usually&nbsp;<a rel="noreferrer noopener" href="http://dev.apollodata.com/tools/apollo-server/requests.html" target="_blank">GET is also supported</a>)</li>



<li><strong>The content type of&nbsp;</strong><code class="" data-line="">application/json</code>, because we’re specifying the query as part of a JSON object</li>



<li><strong>The data sent</strong>, which is a JSON document that looks like:&nbsp;<code class="" data-line="">{ &quot;query&quot;: &quot;{ todos { edges { node { id completed text } } } }&quot; }</code>. This JSON wrapper is helpful because you can also specify other options, like dynamic variables as part of the JSON object.</li>



<li><strong>The actual URL of the GraphQL endpoint</strong>, in this case <code class="" data-line="">http://locahost:4000</code></li>
</ol>



<p class="wp-block-paragraph">And that’s all! Using the above options, you can query nearly any GraphQL API, for example, <a rel="noreferrer noopener" href="https://twitter.com/trevorblades" target="_blank">Trevor Blades</a>&#8216; <a rel="noreferrer noopener" href="http://countries.trevorblades.com/" target="_blank">countries API</a>, which I love to use to introduce people to GraphQL for the first time:</p>



<pre class="wp-block-preformatted">curl \
-X POST \
-H "Content-Type: application/json" \
--data '{ "query": "{ countries { code name } } " }' \
https://countries.trevorblades.com/</pre>



<p class="wp-block-paragraph">Alright great, so we’ve found a completely vanilla way to send requests. For more details about exactly how GraphQL queries work, read <a rel="noreferrer noopener" href="https://twitter.com/stubailo" target="_blank">Sashko Stubailo</a>&#8216;s post, <a rel="noreferrer noopener" href="https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747" target="_blank">“The Anatomy of a GraphQL Query.</a></p>



<h2 class="wp-block-heading" id="d58d"><a href="#3-fetch" aria-hidden="true" class="aal_anchor" id="3-fetch"><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. Fetch</h2>



<p class="wp-block-paragraph">You can make a GraphQL HTTP request in literally any programming language, as long as you can set the above 4 parts correctly. So let’s convert that curl request into some JavaScript code with&nbsp;<code class="" data-line="">fetch</code>, the new standard for getting HTTP results with promises. This will work in modern browsers with no libraries, but will require a polyfill in Node and&nbsp;<a rel="noreferrer noopener" href="http://caniuse.com/#search=Fetch" target="_blank">some browsers</a>. Let’s check out the code:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript" data-line="">require(&#039;isomorphic-fetch&#039;);

fetch(&#039;http://localhost:4000&#039;, {
  method: &#039;POST&#039;,
  headers: { &#039;Content-Type&#039;: &#039;application/json&#039; },
  body: JSON.stringify({ query: `
    query {
      todos {
        edges {
          node {
            completed
            id
            text
          }
	}
      }
    }` 
  }),
})
.then(res =&gt; res.json())
.then(res =&gt; console.log(res.data));</code></pre>



<p class="wp-block-paragraph">If you run this code Chrome&#8217;s DevTools, you&#8217;ll notice that the following output is printed to the console.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="599" height="89" src="https://wp.apollographql.com/wp-content/uploads/2020/12/Screen_Shot_2020-12-06_at_1.09.08_PM.png" alt="" class="wp-image-6287" srcset="https://wp.apollographql.com/wp-content/uploads/2020/12/Screen_Shot_2020-12-06_at_1.09.08_PM.png 599w, https://wp.apollographql.com/wp-content/uploads/2020/12/Screen_Shot_2020-12-06_at_1.09.08_PM-300x45.png 300w" sizes="auto, (max-width: 599px) 100vw, 599px" /></figure>



<p class="wp-block-paragraph">Neat, right? As you can see, the way we request GraphQL data using Fetch is pretty similar to the request we constructed with curl, but there are a few things here that would become pretty repetitive if we had to type them out every time. Not only that, but to effectively work with GraphQL data in most applications, you&#8217;ll likely want to cache it, display the data somehow, and re-render your view when it changes.</p>



<p class="wp-block-paragraph">That sounds like something that a GraphQL client can help us with.</p>



<h2 class="wp-block-heading" id="e15f"><a href="#4-using-graphql-clients-apollo-client" aria-hidden="true" class="aal_anchor" id="4-using-graphql-clients-apollo-client"><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. Using GraphQL clients (Apollo Client)</h2>



<p class="wp-block-paragraph">GraphQL client libraries are meant to help us work with more effectively build fully-fledged applications with GraphQL data.</p>



<p class="wp-block-paragraph"><a href="https://www.apollographql.com/docs/react/">Apollo Client</a> handles the entire data-fetching and state management part of working with GraphQL data- we just need to hook it up and write the queries!</p>



<p class="wp-block-paragraph">For example, if you&#8217;re building a React application, one of the most popular ways to query data using Apollo Client is to use the <code class="" data-line="">useQuery</code> hook. Let&#8217;s demonstrate how we could fetch all the <code class="" data-line="">todos</code> and display them in a list.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript" data-line="">import React from &#039;react&#039;
import { gql, useQuery } from &#039;@apollo/client&#039;

const GET_ALL_TODOS = gql`
  query GetAllTodos {
    todos {
      edges {
        node {
	  completed
	  id
	  text
	}
      }
    }
`;

export const Todos = () =&gt; {
  const { loading, error, data } = useQuery(GET_ALL_TODOS);

  if (loading) return &#039;Loading...&#039;;
  if (error) return `Error! ${error.message}`;

  return (
    &lt;ul&gt;
      { data.todos.edges.map((edge, i) =&gt; (
        &lt;li key={edge.node.id}&gt;{edge.node.text}&lt;/li&gt;
      ))}
    &lt;/ul&gt;
  )
}</code></pre>



<p class="wp-block-paragraph">Passing the GraphQL query to the <code class="" data-line="">useQuery</code> hook gives us an object that can be de-structured into <code class="" data-line="">loading</code>, <code class="" data-line="">error</code>, and <code class="" data-line="">data</code> objects. If the query successfully executes and returns the GraphQL data from the server, we can map over the response <code class="" data-line="">data</code> and display the elements in a list. Sweet!</p>



<p class="wp-block-paragraph">To learn more about Apollo Client and how to set it up in your project, check out the <a href="https://www.apollographql.com/docs/react/get-started/">getting started docs</a>.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph">If you&#8217;re an iOS or Android developer, you can use the <a rel="noreferrer noopener" href="https://www.apollographql.com/docs/ios/" target="_blank">Apollo iOS</a> and <a rel="noreferrer noopener" href="https://github.com/apollographql/apollo-android" target="_blank">Apollo Android</a> GraphQL clients which give you type-safe APIs to work with GraphQL servers.</p>
</blockquote>



<h2 class="wp-block-heading" id="ef7b"><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 class="wp-block-paragraph">Because GraphQL operates over HTTP, you can use any language, client library, or tool to fetch GraphQL data so long as you format the HTTP request properly. If you&#8217;re just getting started with GraphQL, I recommend using a tool like <a href="http://studio.apollographql.com/dev?referrer=blog" target="_blank" rel="noreferrer noopener">Apollo Explorer</a> that&#8217;ll help you understand how to structure requests and explore your schema. And if you&#8217;re getting ready to build a web application that relies on GraphQL data, try out a GraphQL client library like <a rel="noreferrer noopener" href="https://www.apollographql.com/docs/react/" target="_blank">Apollo Client</a>; it saves you time by handling the mundane parts of app development, and lets you focus on coding the parts that makes your app special.</p>



<hr class="wp-block-separator has-css-opacity"/>



<p class="wp-block-paragraph">Special thanks to <a rel="noreferrer noopener" href="https://twitter.com/stubailo" target="_blank">Sashko Stubailo</a> who wrote the first version of this blog post nearly three years ago! Follow him on Twitter at <a rel="noreferrer noopener" href="https://twitter.com/stubailo" target="_blank">@stubailo</a>.</p>


GraphQL

Making GraphQL Requests using HTTP Methods

Learn GraphQL – Tutorials for Fullstack GraphQL

Building a GraphQL API – GraphQL API example

What is a GraphQL query? GraphQL query examples using Apollo Explorer

4 Simple Ways to Call a GraphQL API

React + GraphQL Tutorial — The Server

Full-stack React + GraphQL Tutorial

Past posts

Tutorial: How to build a GraphQL server

GraphQL

Making GraphQL Requests using HTTP Methods

Learn GraphQL – Tutorials for Fullstack GraphQL

Building a GraphQL API – GraphQL API example

What is a GraphQL query? GraphQL query examples using Apollo Explorer

4 Simple Ways to Call a GraphQL API

React + GraphQL Tutorial — The Server

Full-stack React + GraphQL Tutorial

Past posts

Tutorial: How to build a GraphQL server

Stay in our orbit