NHS Jobs

To search job vacancies in the official NHS website can sometimes be some kind of a hassle. This small project proposes a different user interface so it is easier to search NHS postings, while waiting for the new official website due to be online by the end of October 2022.

This project is above all a means to run through some of the abilities the Nhost stack is offering to developers.

The official NHS website does not expose a standard API. As a result, it is not possible to make direct search calls to fetch a JSON payload and render it in the frontend. In this project, the official HTML website is entirely scraped once with Cheerio into the database. Then, three times a day, vacancies from the past two days are scraped and updated into the database.

Schedule a recurring serverless function call

In this project, we connect a Hasura cron trigger with a Nhost Serverless function.

To do so, we need:

• to define a fetch serverless function
• to configure the cron job trigger with the right path: {{NHOST_BACKEND_URL}}/v1/functions/fetch
• To secure the function call in sending the Nhost webhook secret in the cron job's headers

Split a long backend processing into several smaller serverless function calls

The scrapping of the initial HTML website takes time and causes a function timeout. To prevent this, the fetch function scraps only a single result page from the original website, then inserts a new row in the fetch_request table with the number of the next page to scrap.

We then define a Hasura event trigger on the fetch_request table that calls the fetch function again for the next page, and so on, until no result is available anymore.

Make GraphQL calls in a serverless function

A common pattern in Nhost functions is to connect to the database to get some context about the current processing. As we secured the function call with the Nhost webhook secret, it is then safe to connect through GraphQL with the x-hasura-admin-secret attached as a header. This secret is available in Nhost functions as the NHOST_ADMIN_SECRET environment variable.

Enable autocompletion in VS Code for your Hasura schema

VS Code supports GraphQL through this nice extension. To activate if for your schema, you need to create a graphql.config.yml file in the root directory and declare a schema that points to the Nhost local project (when using the CLI) or the Hasura endpoint of your cloud project. In this repository, we are using the CLI to develop locally.

If no headers are defined, the backend will assume the schema introspection is made from a public user. You need to set the x-hasura-admin-secret header to get access to the full introspection (defaults to nhost-admin-secret when using the Nhost CLI).

Generate graphql-request GraphQL operations

graphql-request is a simple and effective GraphQL client that can make GraphQL call much simpler in serverless functions. This repository is configured to generate code for graphql-request operations using the GraphQL Code Generator:

• Follow the graphql-request GraphQL Codegen plugin installation instructions
• Configure the generator in graphql.config.yml
• Define GraphQL operations in the functions directory, for instance an upsert mutation. GraphQL files are prefixed with _ so we are sure there won't be any attempt to deploy them as a function endpoint.
• See the generated sdk
• Use the operation in a function

Generate vue-apollo GraphQL operations

In a similar way, we can generate GraphQL operations for Vue Apollo. It works fine with @nhost/vue and @nhost/apollo:

• Configure the generator in graphql.config.yml. Note that we added a x-hasura-role header set to user to the schema will be generated given the permissions of the users role.
• Define GraphQL operations in the src/graphql directory, for instance vacanciesTable
• See the generated composable
• Use the useVacanciesTableQuery in a Vue composant

Use the Nhost JS SDK with Quasar, Vite, and Apollo

To use the Nhost JS SDK in a client-side rendered Quasar application is quite straight forward.

As Quasar is based on Vue, we are using the standard @nhost/vue library, in addition to @nhost/apollo.

Please have a look at the the Vue main file and the Vite configuration file.

Configure a GraphQL query to render a paginated and searchable table

Quite easy in using Hasura's limit, offset, where and order_by clauses as GraphQL variables in a Vue Apollo composable - see source.

Bonus: dark mode with Quasar

Small composable to start the application in dark/light mode according to user's preferences, and to persist its change to localStorage.

It is also a bit tricky to set dark/light mode to sticky headers in Quasar's QTable component as it is based on CSS' position: sticky. Here's how sass can be configured to make it work.