---
layout: default
---
<ul class="breadcrumb">
  <li><a href="{{ site.baseurl }}/guides">Guides</a></li>
  <li>
    <select class="jump-to-select" onchange="navigateToSelected(this)">
      {% for section in site.data.all_sections %}
        <option {% if section.name == page.section %} selected{% endif %} data-target="{{ site.baseurl }}{{ section.overview_page.url }}">{{ section.name }}</option>
      {% endfor %}
    </select>
  </li>
  <li>
    <select class="jump-to-select" onchange="navigateToSelected(this)">
      {% for section_page in page.section_pages %}
        <option {% if section_page.title == page.title %} selected{% endif %} data-target="{{ site.base_url }}{{ section_page.url }}">{{ section_page.title }}</option>
      {% endfor %}
    </select>
  </li>
</ul>
{% if page.experimental %}
  <div class="experimental-header">
    <p>
      <strong>⚠ Experimental ⚠</strong>
    </p>
    <p>
      This feature may get big changes in future releases.
      Check the <a href="https://github.com/rmosolgo/graphql-ruby/blob/master/CHANGELOG.md">changelog</a> for update notes.
    </p>
  </div>
{% endif %}
{% if page.pro %}
  <div class="pro-header">
    <p>
      <strong>⚡️ Pro Feature ⚡️</strong>
      <span style="font-style: italic;">
        This feature is bundled with <a href="https://graphql.pro">GraphQL-Pro</a>.
      </span>
    </p>
  </div>
{% endif %}
{% if page.enterprise %}
  <div class="enterprise-header">
    <p>
      <strong>🌟 Enterprise Feature 🌟</strong>
      <span style="font-style: italic;">
        This feature is bundled with <a href="https://graphql.pro/enterprise">GraphQL-Enterprise</a>.
      </span>
    </p>
  </div>
{% endif %}
<h1 class="guide-header">{{ page.title }}</h1>
<div class="guide-table-of-contents">{% table_of_contents %}</div>
<div class="guide-container">
  {{ content }}
</div>
<p class="guide-footer">
  Suggestion, improvement, or correction?
  <a href="https://github.com/rmosolgo/graphql-ruby/edit/master/guides/{{ page.path }}">Edit this file</a> or
  <a href="https://github.com/rmosolgo/graphql-ruby/issues/new?title=Guide: {{ page.title }}">report an issue</a>.
</p>
<script>
  // Find headers with IDs and wrap their text in `<a href={{id}}></a>`
  // That way people can easily copy the link.
  var headers = document.querySelectorAll("h1, h2, h3, h4, h5");
  var header, idText, headerLink;
  for (var i = 0; i < headers.length; i++) {
    header = headers[i];
    idText = header.id;
    if (idText) {
      headerLink = document.createElement("a");
      headerLink.href = "#" + idText;
      headerLink.textContent = header.textContent;
      header.textContent = "";
      header.appendChild(headerLink);
    }
  }
  function navigateToSelected(selectElement) {
    var nextPage = selectElement.selectedOptions[0].dataset["target"]
    document.location = nextPage
  }
</script>