Generating QR Codes From Any String in Gatsby
Created: Jul 25, 2021 – Last Updated: Jul 25, 2021
Tags: GatsbyDigital Garden
One of the many side-effects of the coronavirus pandemic is that the QR code got some attention (again). When it first came out you saw it everywhere but the last couple of years it slowly vanished again — until now where your vaccination certificate or check-in apps all use QR codes again.
Generating QR codes from any string you wish in Gatsby could be done in multiple ways. Normally for such operations you’d set up a transformer plugin but realistically you wouldn’t want every string to be converted to a QR code. Thus you can use the createSchemaCustomization API (opens in a new tab) to individually add a new field to your desired node and transform a specific sibling field. This saves work & build time! You can take this YAML schema as an example:
Gatsby will generate a
InformationYaml type out of it and you want to have an additional field called
qrCodeDataURL that contains the data URI of a QR code generated from the
link field. Then you can query it like this:
Continue reading to learn how to do this! You can find the finished code on Codesandbox (opens in a new tab) and you can also check out Filter Future Posts on a Gatsby Blog to see the API in a similar example.
I’m assuming that you already have a Gatsby project set up with some specific fields you want to convert. If not, you can run
npm init gatsby and choose the markdown option. Then you can use the frontmatter to add an additional field. Stop your development server if it’s still running.
My example is using a YAML file that is represented as
InformationYaml in the GraphQL schema of Gatsby. You’ve seen the shape of it in the intro of this post.
Install two dependencies you’ll need:
#Generating QR codes
gatsby-node.js file and add the installed package, and the boilerplate to use Gatsby’s schema customization API (opens in a new tab):
With the function
createTypes you’ll explicitly define the GraphQL types (in this case in GraphQL SDL (opens in a new tab) syntax), with
createFieldExtension you’ll create a so called directive/extension that you then can reuse throughout your types.
#Adding the new field to the type
Since the QR code should be available at the field
qrCodeDataURL it needs to be added to the desired GraphQL type.
But if you’d query this field now you’d only get
null as a result. The data needs to be generated first before querying it.
#Creating the field extension
createFieldExtension action to create a custom directive that you can use on the newly created
But the last piece to this puzzle is missing: The
createQRCode function. The field extension will use result of it as the value of the
createQRCode gets passed all the
fieldName you use (in this example
You can find more information about
qrcode’s options on its GitHub page (opens in a new tab).
#Using the result
Now you’re able to query the new data! Start the development server and visit GraphiQL at
localhost:8000/___graphql. If you explore the schema you should see
qrCodeDataURL now. You can use this data URI as an image now, for example: