🐬

Connect to MySQL

Prerequisites for Connecting Graphweaver with MySQL

In this “how to” we are going to cover how to get Graphweaver and MySQL connected.

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

Once these are installed, let’s get started.

Step 1: Installing and Configuring MySQL

The first step in to make sure that we have the configuration settings correct in MySQL. For this “how to” 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 will use when connecting from Graphweaver. For this “how to” 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 “how to” 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 “how to”, you should never do this in a production system!

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

Step 3: Setting up the Graphweaver Project

Now we are ready to install Graphweaver onto 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

Finally you will be asked if you are happy and a dir will be created. 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

Finally run pnpm start and you should be able to see the Admin UI interface at http://127.0.0.1:9000/:

image

Now there is currently no data sources attached to Graphweaver so lets 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 modal 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 and you should now see the data source listed like this:

image

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

image

Click on the Open Playground link 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 and 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