-
Replace the URL in graphQLFetcher function with your own GraphQL endpoint URL https://<your_function_url>/api/graphql
-
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
-
Run locally - use a local http server (i.e. http-server). If you don't have one installed:
npm i -g http-server
- 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":"*"
}
}-
Deploy this as a static website in the cloud. You can use Azure Blob Storage following steps here
-
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"
}
}
}-
Deploy your GraphQL api function app with the new proxy configured
-
Test GraphiQL by navigating to your function https://<your_function_url>/api/graphiql
⚡ Congrats!! You have now completed all steps!! ⚡
-
To learn more about GraphiQL go to GraphiQL
-
To learn more about proxies go to Azure Proxies