Azure Functions and graphQL

The Apollo Server is a GraphQL oriented server. Seems like all React and Next.js folks are talking about GraphQL. So let's host this in an Azure Function.

• First Clone this repo. This is the function application which will be deployed into Azure.

After cloning, you will have a Function Application (Azure container for functions) and an Apollo Server function.

Follow the instructions to get it running locally.

Deploy to Azure

There's instructions on deploying as well. See if you can get the GraphQL playground running in Azure.

Security, Keys and CORS

You should have the playground up and running, but any attempt to call this function remotely will fail. Here's the rundown.

Your new React or Next app wants to call this function directly using fetch. To get it to work follow these tips:

• The fetch request must be a post
• The url must point to the function like this:

https://xyz.azure.net/graphql 

//graphql is the function name but it can be any name

The default key must be included in the query string parameters with a name of 'code' like this:

/graphql?code=S1a1obVCO5pt5az4H5ZkV1GQsn...

The keys are found in the portal for the function. Just hit "GetFunctionURL" and a drop down shows with three keys.

-CORS must be set to allow your localhost:3000 port or whatever port is used. This is done at the Function Application layer. Just hit the CORS button.

The body of the post must follow this syntax:

let body = JSON.stringify({
      operationName: null,
      query: "{hello}",
      variables: {},
    })

Where the fetch request looks like this:

    let r2 = await fetch(url, {
      body: body,
      method: "POST",
    });

And finally to get the response, it must be parsed like this:

 let a2 = await r2.text();   
 //see code below for setAnswer2
 setAnswer2(
  JSON.parse(a2).data.hello
 );

Make sure you 'fetch' in the useEffect hook.

useEffect(async () => {

And set up a useState hook like this:

 const [answer2, setAnswer2] = useState("");

Congratulations!

This is the first step in proof that we don't need traditional back-ends any longer. We just hit a function for each specific thing we need. We don't need a Virtual Machine, ASP.NET Core, Express or any of the older ways of doing things. We just hit the new microservice endpoint and keep doing things that way.

Azure's scale up and scale out is easy, just click a button. You can deploy the same function worldwide in 10 minutes.

In the next post we'll explore the Apollo Client side in a Next.js application.

One Question:
Has SQL reached it's zenith?

JWP2020 Azure Functions Apollo-Server Graphql.