GraphiQL is an in-browser IDE for exploring GraphQL

Steps:

1. Replace the URL in graphQLFetcher function with your own GraphQL endpoint URL https://<your_function_url>/api/graphql

2. In the Azure Portal navigate to functions, click on the graphql function. From there, click on the Platform features tab -> API -> CORS and add your url as allowed origin

3. Run locally - use a local http server (i.e. http-server). If you don't have one installed:

npm i -g http-server

1. If you want to connect to your function running locally, go to your function's local.settings.json file and change it to include CORS settings:

    {
        "IsEncrypted": false,
        "Values": {
            "AzureWebJobsStorage": "",
            "FUNCTIONS_WORKER_RUNTIME": "node",
        },
        "Host": {
            "CORS":"*"
        }
    }

Extra steps

1. Deploy this as a static website in the cloud. You can use Azure Blob Storage following steps here

2. In your function app configure proxies to redirect traffic to your GraphiQL app

{
  "$schema": "http://json.schemastore.org/proxies",
  "proxies": {
    "graphiql": {
      "matchCondition": {
        "methods": ["GET"],
        "route": "/api/graphiql"
      },
      "backendUri": "your_url_here"
    }
  }
}

1. Deploy your GraphQL api function app with the new proxy configured

2. Test GraphiQL by navigating to your function https://<your_function_url>/api/graphiql

---

⚡ Congrats!! You have now completed all steps!! ⚡

More resouces

1. To learn more about GraphiQL go to GraphiQL

2. To learn more about proxies go to Azure Proxies