Graphql playground in local sitecore cms

 To setup the graphql playgroun in the local sitecore CMS you need to install the sitecore headless package that you can download from Sitecore headless rendering link.

When you have installed it you can verify if the JSS is installed or not using following ways.

1. Check in the folder C:\inetpub\wwwroot\sc.dev.local\App_Config\Sitecore if LayoutServices folder, JavaScriptSerivces and Services.GraphQL folder is created, and

2. Check at the path /sitecore/system/Modules, Layout service and JavaScript Services are present in the CMS.

Once this is installed now you can enable the Playground locally. 

1. There will be one file as Sitecore.Services.GraphQL.Content.Master.config.example in the folder C:\inetpub\wwwroot\sc.dev.local\App_Config\Sitecore\Services.GraphQL. it will be disabled but you can copy in the /Include/zzz folder and enable it.
2. After doing try to hit the url https://sc.dev.local/sitecore/api/graph/items/master in the browser and check it is giving something except error. If it give unauthorize error then enable the graphql by using the following patch

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">

  <sitecore>

    <settings>

      <!-- Enables GraphQL Playground IDE in local environments -->

      <setting name="GraphQL.Enabled" value="true" />

    </settings>

  </sitecore>

</configuration>

3. If it still doesn't work then try to put the <path>/sitecore/api/graph/items</path> in the App_Config\Sitecore\Owin.Authentication\Sitecore.Owin.Authentication.config as follows:

After doing these changes now https://sc.dev.local/sitecore/api/graph/items/master should work and you can open the playground ui with url https://sc.dev.local/sitecore/api/graph/items/master/ui and try to run the following graphql to check if it is working. It should work otherwise check your API Key in the header below

{

  item(path: "/sitecore/content/Home", language: "en") {

    id

    name

    displayName

    fields {

      name

      value

    }

  }

}

or, in case you have SXA

query { 

  layout(language: "en", routePath: "/", site: "sitename") { 

    item { 

      rendered 

    } 

  } 

} 

If you get unauthorize error message on browser then use the following patch for local only.

<?xml version="1.0" encoding="utf-8"?>

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">

  <sitecore>

    <api>

      <GraphQL>

        <defaults>

          <security>

            <systemService>

              <!-- CLI expects this service -->

              <requireAuthentication>false</requireAuthentication>

              <requireApiKey>true</requireApiKey>

            </systemService>

          </security>

        </defaults>

      </GraphQL>

    </api>

  </sitecore>

</configuration>

This is used to patch the config in the \App_Config\Sitecore\Services.GraphQL\Sitecore.Services.GraphQL.config