Sourcing from Flotiq
This guide will help you understand how to set up Gatsby to pull data from Flotiq.
Flotiq is a headless CMS with a primary focus on developer experience and integration capabilities. Flotiq’s cloud-based dashboard allows you to design your content types and work with your data, but Flotiq also provides support for powerful integrations. One of Flotiq’s key principles is to provide an effortless way to consume your content in the applications you build. It’s solved by supporting technologies like OpenAPI 3.0 or Zapier as well as by providing customized API docs and SDK libraries based on your content types.
Using a website generator like Gatsby to consume content stored in Flotiq is one of the most frequent use cases. The integration is enabled by the gatsby-source-flotiq source plugin, which bridges the dynamic REST API of your Flotiq account with Gatsby’s GraphQL.
This guide will reference the gatsby-starter-blog blog starter, but remember to check out the more advanced starters prepared to work with Flotiq:
Quickstart using a Flotiq starter
Start project from template using Gatsby CLI
Set up “Blog Post” Content Type in Flotiq
Create your Flotiq.com account. Next, create the
Blog PostContent Type straight from the
Note: You can also define the
Blog PostContent Type using the Flotiq REST API.
The next step is to configure your application to know from where it has to fetch the data.
You need to create a file called
.envinside the root project directory, with the following structure. The Read-Only API key can be copied from the Flotiq user settings menu, under API Keys.
Navigate into your new site’s directory and start it up.
If you wish to import example blog posts to your account, before running
gatsby developrun this Node.js script provided by Flotiq.
Note: You need to put your Full Access API key in
.envfor import to work, but this can be swapped back to the Read Only API key afterwards. You don’t need the Blog Post content type already in your account. If you already have posts with ids
blogpost-2they will be overwritten.
It will add 1 image and 2 blog posts to your Flotiq account.
Setting up the Flotiq source plugin in a Gatsby project
The Blog starter you’ve just set up uses the gatsby-source-flotiq source plugin to pull content from Flotiq.
Here are the steps to use this source plugin in other Gatsby projects:
If you’re using the provided starter - all the following steps have been already taken care of, you can dive into the relevant project files to verify how it’s been done.
Install the plugin:
Provide API credentials in
.env(see above for more details)
Register the source plugin in
gatsby-config.js: Make sure your
gatsby-config.jscontains the following configuration:
By default the source plugin will pull all the data you’ve stored in Flotiq. In some cases, e.g. when building sites that have thousands of pages - you’ll likely want to limit the amount of pulled data during development. You can do that either by narrowing down the scope to specific content types or by limiting the number of pulled objects (see the
objectLimit options). The source plugin will do its best to resolve any dependencies for you.
You can find more details about how to configure the Flotiq source plugin in the plugin’s README.
Accessing Flotiq data in Gatsby
Once you finish configuring your environment you can start developing. The source plugin will pull all the content from your Flotiq account and create respective Gatsby GraphQL nodes. It will also preserve the relations you’ve setup in Flotiq, so the GraphQL nodes will be automatically linked.
For example, if you define a relation between
Category content types in Flotiq - they will retain their relationship in Gatsby’s GraphQL, so you can retrieve that in a query:
The next step is implementing these queries in your
Now you’ll want to let Gatsby create appropriate pages for your Content Objects. This example uses a
blogPost component as a template:
Once you’re finished with your website there are several ways to deploy it. You can use any hosting provider you choose - Netlify, Heroku, AWS S3, Cloudflare, etc.
If you’re using Gatsby Cloud, you can use the Flotiq integration to streamline your workflow by providing live updates in preview and push-button deployments.
You can read the relevant Flotiq Gatsby Cloud integration documentation page to learn more.
This guide has gone through the key points of setting up a Gatsby starter, configuring it to work with Flotiq, and kicking off your development process. Remember to check out other Flotiq Gatsby starters already prepared to kick-start your next project. You can also join the Flotiq Discord channel if you need any help!