{"id":16521,"date":"2017-03-10T12:15:49","date_gmt":"2017-03-10T10:15:49","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=16521"},"modified":"2017-03-09T16:29:38","modified_gmt":"2017-03-09T14:29:38","slug":"introduction-graphql-via-github-api","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/","title":{"rendered":"An Introduction to GraphQL via the GitHub API"},"content":{"rendered":"

RESTful, JSON-delivering APIs are today\u2019s default choice when building an API. However, there\u2019s a new API kid on the block that\u2019s generating considerable attention: GraphQL<\/a>.<\/p>\n

GraphQL is an entirely new way to consume and build APIs. Done right, you can build wonderfully tight integrations that aren\u2019t possible with REST APIs. Today, we\u2019ll get firsthand exposure to GraphQL via the GitHub GraphQL API.<\/p>\n

Before we start coding, let\u2019s explore why companies like GitHub, Facebook, and Pinterest are releasing GraphQL APIs.<\/p>\n

The Origins of GraphQL<\/h2>\n

In 2012, Facebook began an effort to rebuild their native mobile apps and quickly ran into a major source of frustration.<\/p>\n

The Facebook mobile team required a JSON version of the news feed so it could be rendered with native components. However, there were significant differences between how the news feed data was stored<\/em> and how product designers and developers consumed<\/em> that data.<\/p>\n

Frequently, developers like me think of data as a graph of objects. For example, I might represent the data presented on the Codeship blog like this:<\/p>\n

blog(name: 'codeship') {\r\n  title\r\n  feedUrl\r\n  posts(last: 10) {\r\n    title\r\n    url\r\n    commentsCount\r\n    favorites {\r\n      id\r\n      avatar_url\r\n    }\r\n  }\r\n}<\/pre>\n
However, data is typically not query-able \u2014 much less stored \u2014 in an easy-to-consume graph format. If the data is available in a REST API, it may require multiple API calls (for example, a separate HTTP call to fetch comment details for every post rendered on the page). Additionally, I can rarely specify only<\/em> the data I need with a REST API: Instead, I\u2019ll typically get a dump of everything<\/em> available for each record.<\/p>\n
Multiple HTTP calls? Sending excessive amounts of data across the wire? These are huge burdens when you want to deliver fast-responding interactions. On mobile \u2014 which was Facebook\u2019s focus \u2014 these problems are compounded.<\/p>\n
To solve this problem, Facebook\u2019s engineering team developed GraphQL<\/a>. GraphQL approaches data-fetching from the perspective of product designers and developers.<\/p>\n
Enter GraphQL<\/h2>\n
After three years of internal use, Facebook released a working draft of the GraphQL spec in 2015. APIs that conform to this spec can be queried via a graph syntax similar to the sample above. The server-side runtime for executing GraphQL queries doesn\u2019t tie you to a particular storage engine: It\u2019s an application-level API, not a database.<\/p>\n
Today, companies like GitHub, Pinterest, and Shopify have released GraphQL APIs.<\/p>\n
What Problems Does GraphQL Solve Versus REST?<\/h2>\n
These are the some of the key GraphQL features and the problems they solve:<\/p>\n
    \n
  1. Get exactly what you ask for:<\/strong> Your queries mirror the shape of data returned from a GraphQL API, so there\u2019s no confusion over which fields an API call returns.<\/li>\n
  2. Nesting:<\/strong> Graph queries can be nested, so you can fetch data across relationships. Without GraphQL, gathering data across relationships typically involves multiple, slower, HTTP calls.<\/li>\n
  3. Strongly typed:<\/strong> It\u2019s important to get the data format you expect when working with an external data source. GraphQL is strongly typed, so you get these guarantees.<\/li>\n
  4. Introspective:<\/strong> Since a GraphQL server can be queried for the calls it supports, you can use tools like GraphiQL to organically explore versus hunting through API docs.<\/li>\n
  5. No versioning:<\/strong> Since you get what ask for, fields won\u2019t be added or removed out from under you. When fields are deprecated, they can be marked as such to provide advance warning.<\/li>\n<\/ol>\n
    Let\u2019s Solve a Problem with GraphQL<\/h2>\n
    Let\u2019s say I have an idea for a GitHub integration: Given a specific GitHub repository, maintain a leader board of which developers are most active commenting on pull requests.<\/p>\n
    The output should look like:<\/p>\n
    +--------------------------+----------+
    \n| Author | Comments |
    \n+--------------------------+----------+
    \n| Richard | 65 |
    \n| Derek | 23 |
    \n| Josh | 21 |
    \n| ... | ... |
    \n+--------------------------+----------+<\/code><\/p>\n
    Set up your GraphQL environment<\/h3>\n
    We\u2019ll get things going on the GitHub side (sign up for early access and generate an access token) and install GraphiQL.app<\/a>, a GraphQL query editor.<\/p>\n
    Sign up with GitHub\u2019s early access program<\/h2>\n
    The GitHub\u2019s GraphQL library is in their early access program<\/a>, which requires acknowledgment to join. Accept the prerelease agreement<\/a> to sign up.<\/p>\n
    Generate a GitHub personal access token<\/h2>\n
    We will authenticate to GitHub\u2019s GraphQL API via a personal access token. Follow the steps<\/a> in the GitHub guide, enabling the following scopes:<\/p>\n
    <\/a><\/p>\n
    Copy the generated access token to your clipboard.<\/p>\n
    Install GraphiQL.app<\/h2>\n
    GraphiQL.app<\/a> is a lightweight wrapper around GraphiQL<\/a>, an interactive in-browser IDE for GraphQL. GraphiQL makes it easy to explore GraphQL APIs like GitHub\u2019s.<\/p>\n
    View the GraphiQL.app README<\/a> for installation instructions.<\/p>\n
    Configure GraphiQL to use GitHub<\/h2>\n
    There are two pieces we need to configure with GraphiQL to use the GitHub API:<\/p>\n
      \n
    1. Add our previously generated personal access token to request headers.<\/li>\n
    2. Provide the URL to the GitHub GraphQL API endpoint.<\/li>\n<\/ol>\n
      Let\u2019s start with the request headers. Click the Edit HTTP Headers<\/em> link in the upper right.<\/p>\n
      \"\"<\/a><\/p>\n
      Add a header with key Authorization<\/code> and a value with Bearer #{TOKEN}<\/code>, where token is the personal access token you generated earlier.<\/p>\n
      <\/a><\/p>\n
      It\u2019s not intuitive, but click outside the Edit HTTP Headers<\/em> panel to close the panel and return to the editor.<\/p>\n
      Finally, enter https:\/\/api.github.com\/graphql<\/code> as the GraphQL endpoint:<\/p>\n
      \"\"<\/a><\/p>\n
      Test your configuration<\/h2>\n
      Let\u2019s ensure we\u2019re ready to go. Copy and paste the following query:<\/p>\n
      query {\r\n  organization(login: \"nasa\") {\r\n    name\r\n    url\r\n  }\r\n}<\/pre>\n
      You should see high-level information on NASA\u2019s GitHub organization:<\/p>\n
      <\/a><\/p>\n
      Data hierarchy<\/h3>\n
      Back to our problem: showing the most active pull request comment authors. To get down to this data, we\u2019ll need to access data through several nested relationships:<\/p>\n
      organization => repository => pull requests => => comments<\/code><\/p>\n
      We\u2019ll step through this one-by-one below. Don\u2019t worry: It\u2019s not as complex as it might look above.<\/p>\n
      Fetch a GitHub organization<\/h2>\n
      I\u2019m going to fetch data from the Ruby on Rails repository<\/a> on GitHub. To start, we\u2019ll need to access the rails<\/code> organization:<\/p>\n
      query {\r\n  organization(login: \"rails\") {\r\n    name\r\n    url\r\n  }\r\n}<\/pre>\n
      Pasting the query above should generate output like this:<\/p>\n
      {\r\n  \"data\": {\r\n    \"organization\": {\r\n      \"name\": \"Ruby on Rails\",\r\n      \"url\": \"https:\/\/github.com\/rails\"\r\n    }<\/pre>\n
      In the example above, organization<\/code> is an object. The organization\u2019s name<\/code> and url<\/code> are fields<\/a>. Notice we only get the fields we\u2019ve asked for. By comparison, if we used the GitHub REST API, more than 30 fields<\/a> would be returned with information on the organization.<\/p>\n
      The organization login<\/code> is an argument<\/a>. These are the REST equivalent of query parameters, but more magical. Any object or field can have its own set of arguments: This is one of the ways GraphQL can eliminate multiple HTTP calls versus REST when fetching data. I\u2019ll demonstrate this shortly.<\/p>\n
      Notice that as you type in GraphiQL, suggestions are provided. This is the introspective nature of GraphQL:<\/p>\n
      <\/a><\/p>\n
      Fetch the rails<\/code> repository<\/h2>\n
      We\u2019ll find the rails<\/code> repository in a similar nature as the Rails organization. Since a repository belongs to an organization, it is nested under an organization in a GraphQL query:<\/p>\n
      query {\r\n  organization(login: \"rails\") {\r\n    name\r\n    url\r\n    repository(name: \"rails\") {\r\n      name\r\n    }\r\n  }\r\n}<\/pre>\n
      The output should look like:<\/p>\n
      {\r\n  \"data\": {\r\n    \"organization\": {\r\n      \"name\": \"Ruby on Rails\",\r\n      \"url\": \"https:\/\/github.com\/rails\",\r\n      \"repository\": {\r\n        \"name\": \"rails\"\r\n      }\r\n    }\r\n  }\r\n}<\/pre>\n
      We can see the start of the GraphQL magic forming: We\u2019ve now queried across two associated objects (organizations and repositories). We also have a much leaner payload: Fetching a repository with the GitHub REST API may return a response with nearly 300 lines<\/a>.<\/p>\n
      Fetch pull requests<\/h3>\n
      Pull requests belong to repositories, so these are nested under a repository in the query. We\u2019ll fetch the last ten pull requests. Nest the following under repository<\/code> and execute the query:<\/p>\n
      pullRequests(last: 10)<\/code><\/p>\n
      Notice how GraphiQL automatically added the leaf fields under pullRequests<\/code> after the query was executed:<\/p>\n
      \"\"<\/a><\/p>\n
      This makes exploring a GraphQL API very organic.<\/p>\n
      Let\u2019s fetch the title of each PR and remove the PR id field:<\/p>\n
      pullRequests(last: 10) {\r\n  edges {\r\n    node {\r\n      title\r\n    }\r\n  }\r\n}<\/pre>\n
      Now, let\u2019s just grab open PRs. Go back to pullRequests(last: 10)<\/code> in GraphiQL and let\u2019s add a new argument.<\/p>\n
      Start typing states<\/code>. GraphiQL shows states<\/code> as a valid argument, but I\u2019m unfamiliar with the PullRequestState<\/code> type. Just click it, and the docs will appear in the sidebar.<\/p>\n
      <\/a><\/p>\n
      Again, the introspective nature of GraphQL is super helpful. We\u2019re able to focus on building our query and accessing docs as we need them.<\/p>\n
      So, let\u2019s just specify OPEN<\/code> pull requests:<\/p>\n
      pullRequests(last: 10, states: [OPEN])<\/code><\/p>\n
      <\/a><\/p>\n
      Comments<\/h3>\n
      We\u2019re mixing and repeating at this point: The format is similar to what we\u2019ve already done. We\u2019ll grab pull request comments. This completes our first working GraphQL query!<\/p>\n
      {\r\n  organization(login: \"rails\") {\r\n    name\r\n    url\r\n    repository(name: \"rails\") {\r\n      name\r\n      pullRequests(last: 10, states: [OPEN]) {\r\n        edges {\r\n          node {\r\n            title\r\n            comments(last: 10) {\r\n              edges {\r\n                node {\r\n                  author {\r\n                    name\r\n                  }\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}<\/pre>\n
      How Would We Gather the Same Data via GitHub\u2019s REST API?<\/h2>\n
      If I\u2019m using the existing GitHub API, I\u2019d need to assemble a number of requests to gather this data: fetching an org, fetching a repo, fetching open pull requests, and fetching comments for each pull request.<\/p>\n
      This is pretty inefficient. Not only does this require many HTTP calls, but each response sends a significant amount of information that we aren\u2019t using. Additionally, I\u2019d have no choice but to navigate the REST API docs to determine endpoints and possible query params. With GraphiQL, you may never have to leave the app to generate the query.<\/p>\n
      Queries are like view templates<\/h3>\n
      If you inspect our working query above, you\u2019ll notice there are several places where I\u2019ve hard-coded argument values: the organization login, the repository name, the number of pull requests to fetch, etc. This doesn\u2019t make the query easily reusable if we\u2019d like to fetch the same information from other repositories.<\/p>\n
      GraphQL has a number of ways to address this. In general, you should think of GraphQL queries just like you think of view templates.<\/p>\n
      Variables<\/h3>\n
      GraphQL has first-class support for variables, so we can remove these hard-coded values (organization login, repository name, etc.) from the query.<\/p>\n
      There are three steps to use variables in GraphQL queries. I can\u2019t say it any better than the GraphQL docs<\/a>, so I\u2019ve placed the steps below:<\/p>\n
        \n
      1. Replace the static value in the query with $variableName<\/code>.<\/li>\n
      2. Declare $variableName<\/code> as one of the variables accepted by the query.<\/li>\n
      3. Pass variableName: value<\/code> in the separate, transport-specific (usually JSON) variables dictionary.<\/li>\n<\/ol>\n
        Here\u2019s how the GitHub query looks now in GraphiQL:<\/p>\n
        <\/a><\/p>\n
        Rather than copying my screenshot, I\u2019d suggest modifying the query yourself. If you make any errors, watch GraphQL present debug messages, helping you work through the query construction.<\/p>\n
        Fragments<\/h3>\n
        Let\u2019s say I\u2019d like to fetch each pull request author as well. We\u2019re already fetching user fields for each comment. Do I just copy and paste those fields?<\/p>\n
        author {\r\n  name <-- User field\r\n}<\/pre>\n
        If you\u2019re like me, that feels non-DRY. We should ensure we grab the same data every time we fetch User<\/code> fields. For example, if we decide to fetch an avatarUrl<\/code>, we\u2019d likely want to do that for every User<\/code>.<\/p>\n
        GraphQL provides fragments for easy reuse. We can define a fragment for user fields:<\/p>\n
        fragment userFields on User{\r\n  name\r\n  avatarURL\r\n}<\/pre>\n
        \u2026and include the fragment in our query.<\/p>\n
        <\/a><\/p>\n
        Executing a GraphQL Query via Ruby<\/h2>\n
        So far, I\u2019ve just used GraphiQL to query the GitHub API. For real-world usage, I\u2019ll need to use a client library.<\/p>\n
        I\u2019ll use the Ruby graphql-client gem<\/a> to execute the query and the terminal-table gem<\/a> to display the leader board. I\u2019ve created a GitHub repository<\/a> with the needed bits to execute the query.<\/p>\n
        git clone git@github.com:itsderek23\/github_graphql.git\r\ncd github_graphql\r\ngem install terminal-table graphql-client \r\nGITHUB_TOKEN=<your token> ruby github_graphql.rb<\/pre>\n
        With this data, we can now build our pull request commenter leader board (full code):<\/p>\n
        +--------------------------+----------+
        \n| Author | Comments |
        \n+--------------------------+----------+
        \n| Rafael Fran\u00e7a | 23 |
        \n| Matthew Draper | 21 |
        \n| Jon Moss | 18 |
        \n| Kasper Timm Hansen | 14 |
        \n| Andrew White | 12 |
        \n| Sean Griffin | 10 |
        \n| Ryuta Kamizono | 10 |
        \n| Arthur Nogueira Neves | 7 |
        \n| Vladimir Dementyev | 7 |
        \n| Klas Eskilson | 6 |
        \n| Robin Dupret | 6 |
        \n| Bradley Priest | 6 |
        \n| kenta-s | 5 |
        \n| Kir Shatrov | 5 |
        \n| Nikolay Shebanov | 5 |
        \n| Koen Punt | 4 |
        \n| Egor Homakov | 4 |
        \n| David Faulkenberry | 4 |
        \n| Jeremy Daer | 4 |
        \n| Eileen M. Uchitelle | 4 |
        \n| Richard Beddington | 4 |
        \n| David Heinemeier Hansson | 4 |
        \n| Travis Hunter | 3 |
        \n| Nathan | 3 |
        \n| Guillermo Iguaran | 3 |
        \n| Mike Busch | 3 |
        \n| Alexander Marrs | 3 |
        \n| Mehmet Emin \u0130NA\u00c7 | 3 |
        \n+--------------------------+----------+<\/code><\/p>\n
        At this point, we\u2019ve covered enough of the basics for you to explore building your first GraphQL query. There\u2019s certainly more to queries than what we\u2019ve covered (directives, aliases, and more). See the official GraphQL website<\/a> to learn more.<\/p>\n
        \n\n\n\n
        Reference: <\/span><\/td>\nAn Introduction to GraphQL via the GitHub API<\/a> from our WCG partner<\/a> Derek Haynes at the Codeship Blog<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
        RESTful, JSON-delivering APIs are today\u2019s default choice when building an API. However, there\u2019s a new API kid on the block that\u2019s generating considerable attention: GraphQL. GraphQL is an entirely new way to consume and build APIs. Done right, you can build wonderfully tight integrations that aren\u2019t possible with REST APIs. Today, we\u2019ll get firsthand exposure …<\/p>\n","protected":false},"author":225,"featured_media":927,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[452,451,450],"class_list":["post-16521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-git","tag-github","tag-graphql"],"yoast_head":"\nAn Introduction to GraphQL via the GitHub API - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"RESTful, JSON-delivering APIs are today\u2019s default choice when building an API. However, there\u2019s a new API kid on the block that\u2019s generating considerable\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Introduction to GraphQL via the GitHub API - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"RESTful, JSON-delivering APIs are today\u2019s default choice when building an API. However, there\u2019s a new API kid on the block that\u2019s generating considerable\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-10T10:15:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Derek Haynes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Derek Haynes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/\"},\"author\":{\"name\":\"Derek Haynes\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2aaa4e7b1909ee5cb0232799fd8ed087\"},\"headline\":\"An Introduction to GraphQL via the GitHub API\",\"datePublished\":\"2017-03-10T10:15:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/\"},\"wordCount\":1850,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg\",\"keywords\":[\"Git\",\"GitHub\",\"GraphQL\"],\"articleSection\":[\"Web Dev\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/\",\"name\":\"An Introduction to GraphQL via the GitHub API - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg\",\"datePublished\":\"2017-03-10T10:15:49+00:00\",\"description\":\"RESTful, JSON-delivering APIs are today\u2019s default choice when building an API. However, there\u2019s a new API kid on the block that\u2019s generating considerable\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Dev\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"An Introduction to GraphQL via the GitHub API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2aaa4e7b1909ee5cb0232799fd8ed087\",\"name\":\"Derek Haynes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a7ce64212b9d27231a5b04b67bcca0ca6d74aae85f29701036baba1fccc3d053?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a7ce64212b9d27231a5b04b67bcca0ca6d74aae85f29701036baba1fccc3d053?s=96&d=mm&r=g\",\"caption\":\"Derek Haynes\"},\"description\":\"Derek Haynes is a cofounder of Scout, an avid Rubyist, a bungling Elixirist, and a lover of beautifully presented data.\",\"url\":\"https:\/\/www.webcodegeeks.com\/author\/derek-haynes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"An Introduction to GraphQL via the GitHub API - Web Code Geeks - 2026","description":"RESTful, JSON-delivering APIs are today\u2019s default choice when building an API. However, there\u2019s a new API kid on the block that\u2019s generating considerable","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/","og_locale":"en_US","og_type":"article","og_title":"An Introduction to GraphQL via the GitHub API - Web Code Geeks - 2026","og_description":"RESTful, JSON-delivering APIs are today\u2019s default choice when building an API. However, there\u2019s a new API kid on the block that\u2019s generating considerable","og_url":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-03-10T10:15:49+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg","type":"image\/jpeg"}],"author":"Derek Haynes","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Derek Haynes","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/"},"author":{"name":"Derek Haynes","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2aaa4e7b1909ee5cb0232799fd8ed087"},"headline":"An Introduction to GraphQL via the GitHub API","datePublished":"2017-03-10T10:15:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/"},"wordCount":1850,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg","keywords":["Git","GitHub","GraphQL"],"articleSection":["Web Dev"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/","url":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/","name":"An Introduction to GraphQL via the GitHub API - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg","datePublished":"2017-03-10T10:15:49+00:00","description":"RESTful, JSON-delivering APIs are today\u2019s default choice when building an API. However, there\u2019s a new API kid on the block that\u2019s generating considerable","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/web-development\/introduction-graphql-via-github-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Dev","item":"https:\/\/www.webcodegeeks.com\/category\/web-development\/"},{"@type":"ListItem","position":3,"name":"An Introduction to GraphQL via the GitHub API"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2aaa4e7b1909ee5cb0232799fd8ed087","name":"Derek Haynes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a7ce64212b9d27231a5b04b67bcca0ca6d74aae85f29701036baba1fccc3d053?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a7ce64212b9d27231a5b04b67bcca0ca6d74aae85f29701036baba1fccc3d053?s=96&d=mm&r=g","caption":"Derek Haynes"},"description":"Derek Haynes is a cofounder of Scout, an avid Rubyist, a bungling Elixirist, and a lover of beautifully presented data.","url":"https:\/\/www.webcodegeeks.com\/author\/derek-haynes\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/16521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/225"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=16521"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/16521\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/927"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=16521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=16521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=16521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}