Send GraphQL Requests to Hasura from Netlify Serverless Functions using node-fetch
We'll create a helper function to send GraphQL requests to Hasura from our serverless
functions using node-fetch and passing the X-Hasura-Admin-Secret in the header of the request.
Hasura is configured with an admin password that we set in the previous lesson. When making an API request the client passes the admin password in the header X-Hasura-Admin-Secret. Then Hasura validates the admin secret and allows access to all resources.
The secret is called admin-secret since the admin ****role is used to execute the request i.e the caller will have permissions to create/update/delete/view any data that is there.
Instructor: [0:00] In order to load our boot data into this loadCorgis function, we're going to need to send a request to our Hasura GraphQL API. Depending on what you've read, it may seem like you can't use the Fetch API to send GraphQL queries. Fortunately, we can.
[0:18] We're going to end up using this Hasura API in two different ways to reboot and to create boots. To do that, I'm going to set up a little utility function. Let's start by creating a folder called util. Inside of that, we're going to create hasura.js. This is going to be a helper function that allows us to send off a GraphQL query and return the result.
[0:42] Inside this function, we're going to get Fetch, because we're only doing simple calls here, so we don't need all the power of a lot of those GraphQL libraries. We can just use the Fetch API.
[0:59] Then we're going to export a named function called hasuraRequest. This is going to be an async function. It's going to accept a query and variables. Inside this function, we are going to send a request, which we're going to store in result. That will be sent using the Fetch API. We're going to use our environment variable to get that Hasura URL that we stored in the previous lesson.
[1:30] This is always going to be sent as POST. GraphQL queries are always sent as POST. We can hardcode that in. Because we know we're sending this to Hasura, we need to send that admin secret. Remember, we set that so that we would be able to authenticate the request, so that not just anyone could go in and change our data.
[1:50] The way that Hasura does this is using what they call the X-Hasura-Admin-Secret header. We'll set that to process.env.HASURA_ADMIN_SECRET, which we set in the previous lesson. The body that we're going to send is going to be a JSON object, so we're going to stringify that. Inside, we're going to pass in the query and the variables.
[2:18] That will bring us back a result which will also be JSON. We're going to grab it out in that format. Then we're going to check that. If we don't get a result, or if that result doesn't have data, we're going to console.error with the result, and we'll return an empty array.
[2:42] If we do get data, we want to return that, so we will return result.data. This is our helper function. This will allow us to quickly send GraphQL requests to Hasura and get the result back without us having to write all of this boilerplate every time.
@Ron because we need to send the X-Hasura-Admin-Secret header, we can't put it directly in the client-side code or someone could find the key in the source code. Serverless functions let us keep secret keys private because the source can't be accessed.
@jason Thanks for your reply. It makes sense we should hide Admin-Secret.
But by doing that, can we still achieve Subscription provided by Hasura, which is the major point of 3Factor practice?
Also can still expose the graphql to frontend by depending on the Authentication/Authorisation Hasura provides?
Thank you, Ron
@Ron for subscriptions and read-only access, I set up permissions so that someone unauthenticated can read certain data, but not change anything
those requests can be made without the admin secret, so it's safe to send them from the client side (for subscriptions, using something like Apollo or urql)
here's an example of how I set up a subscription with Hasura and urql for my livestream: https://github.com/socket-studio/preact/blob/main/src/hooks.js — no admin secret required because permissions for that API are read-only
I hope that helps!
Hi, thanks for your course.
I have one question, is it normal call hasura through serverless functions, I mean why not just let frontend call hasura directly?