Example GraphiQL endpoint: https://graphqlplayground.azurewebsites.net/api/graphiql

1. ⚠️ Go to graphiql and open index.html

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

3. 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

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

npm i -g http-server

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!! Go ask your instructor for a badge! ⚡

1. To learn more about GraphiQL go to GraphiQL

2. To learn more about proxies go to Azure Proxies