↩︎

How to connect your GatsbyJS site to a MySQL database?

While migrating your PHP website to a JAMStack site, you can find yourself struggling with the huge MySQL database that you have been maintaining for years. Fortunately, GatsbyJS offers a plugin to easily fetch all the data you need from your MySQL database.

Install gatsby-source-mysql

In your project, add gatsby-source-mysql by running:

yarn add gatsby-source-mysql

Then, you will need to add the plugin to gatsby-config.js with the appropriate settings:

module.exports = {
	plugins: [
		{
			resolve: `gatsby-source-mysql`,
			options: {
				connectionDetails: {
					host: `localhost`,
					user: `db-username`,
					password: `db-password`,
					database: `world`,
				},
				queries: [
					{
						statement: `SELECT * FROM country`,
						idFieldName: `Code`,
						name: `country`,
					},
				],
			},
		},
		// ... other plugins
	],
}

The statement field is where you will put your query. It can be as simple as SELECT * FROM country or it can be as long and complicated as you wish.

If the query's length make it illegible, you can assign it to a constant before module.exports.

const myQuery = `SELECT * FROM country`

module.exports = {
	plugins: [
		{
			resolve: `gatsby-source-mysql`,
			options: {
				connectionDetails: {
					host: `localhost`,
					user: `db-username`,
					password: `db-password`,
					database: `world`,
				},
				queries: [
					{
						statement: myQuery,
						idFieldName: `Code`,
						name: `country`,
					},
				],
			},
		},
		// ... other plugins
	],
}

idFieldName must be returned by the query defined in statement.

The name field will be used for naming your node in GraphQL.