🐬

Connect to MySQL

Prerequisites for Connecting Graphweaver with MySQL

In this guide, we are going to cover how to get Graphweaver and MySQL connected.

Before we dive in, let’s make sure that you have MySQL, Node.js version 18 or greater, and pnpm version 8 or greater installed on your local machine.

Once these are installed, we can get started.

Step 1: Installing and Configuring MySQL

The first step is to make sure that we have the configuration settings correct in MySQL. For this guide, we are going to assume that you have MySQL running locally on port 3306.

If you have it running on another port then remember to change this in the Graphweaver configuration below. Next you are going to need a user in MySQL that we can use when connecting from Graphweaver. For this guide we are going to assume that you have a user root and a password of password. Here are the settings that we will need:

  • user: root
  • password: 'password'
  • port: 3306

Next, let’s setup a database to use as an example.

Step 2: Creating a Database

For this guide, we are going to create a database with a single table. We will be using a number of the MySQL command line tools to create the DB, create a user table and seed with some data. Don’t worry if you prefer to use a GUI when setting up the DB. As long as the names match, you can use any tool you need. Make sure that you have the mysql shell client installed on your local before moving on.

Let’s start by creating the database:

mysql -h 127.0.0.1 -P 3306 -u root -p -e "create database gw";

Next let’s create the user table:

mysql -h 127.0.0.1 -P 3306 -u root -p gw -e "CREATE TABLE user (   
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  password VARCHAR(255) NOT NULL,
  first_name VARCHAR(255),
  last_name VARCHAR(255)
);";

Lastly, let’s create some dummy users in the table:

mysql -h 127.0.0.1 -P 3306 -u root -p gw -e "
  INSERT INTO user (username, password, first_name, last_name) VALUES
    ('user1', 'password1', 'John', 'Doe'),
    ('user2', 'password2', 'Jane', 'Smith'),
    ('user3', 'password3', 'Alice', 'Johnson'),
    ('user4', 'password4', 'Bob', 'Brown');
"

💡
We are just using plain text password here in this guide, you should never do this in a production system!

Now that we have a database and a users table, let’s create the Graphweaver project.

Step 3: Setting up the Graphweaver Project

Now we are ready to install Graphweaver on your local machine. To do that, run the following command:

npx graphweaver@latest init

This will start the creation wizard that will guide you through creating your Graphweaver app.

Give your app a name. Here, we are calling it mysql-example :

? What would your like to call your new project? mysql-example

Next, select that you would like to use MySQL:

? Which Graphweaver backends will you need? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◉ MikroORM - MySQL Backend

You will be asked if you are happy with a new directory being created for your new app. Hit enter.

Step 4: Installing the Required Packages

Now that we have the project created, make sure that you change directory and install the dependencies.

cd mysql-example
pnpm i

Then run pnpm start - you should now be able to see the Admin UI interface at http://127.0.0.1:9000/:

image

There are currently no data sources attached to Graphweaver, so let’s go ahead and do that next.

Step 5: Configuring the Connection to MySQL in Graphweaver

In this next step we are going to create the connection from MySQL to Graphweaver. For this we can use the CLI tool to import the database. To start the import run the following command: 

npx graphweaver@latest import mysql

This will then ask you a number of questions to make the connection to the database: 

? What is the database server's hostname? 127.0.0.1
? What is the database name? gw
? What is the username to access the database server? root
? What is the password for this user? ********
? What is the port? 3306

Once you have answered the connection details, introspection will create the files in your project to model the data:

⠙ Introspecting...Fetching database schema...
⠹ Introspecting...Building metadata...
Closing database connection...
Database connection closed.
Import complete.

If you look at the folder structure now you can see that you have new files that define the data source:

image

We now have everything we need to start the server and make our first GraphQL request.

Let’s do that next.

Step 6: Making our first GraphQL Query

Back on the command line start the server with pnpm start. This will start the server at http://localhost:9000 - you should now see your data source listed like this:

image

Select it and then select the User entity to browse the data:

image

Click on the Open Playground button an you will see the playground, where you can now send a query to the GraphQL server: 

query {
  result: users(pagination: {offset: 0, limit: 50, orderBy: {id: ASC}}) {
    id
    username
    firstName
    lastName
    __typename
  }
}

And get the results:

image

Congratulations! You have now connected MySQL to Graphweaver. You can keep creating your tables and data models.

The great thing about Graphweaver is that you can connect multiple datasources together. For more information on what data sources you can connect, take a look at the Introduction to Data Providers page.

Exogee