- Prerequisites for Connecting Graphweaver with MySQL
- Step 1: Installing and Configuring MySQL
- Step 2: Creating a Database
- Step 3: Setting up the Graphweaver Project
- Step 4: Installing the Required Packages
- Step 5: Configuring the Connection to MySQL in Graphweaver
- Step 6: Making our first GraphQL Query
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');
"
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:9
000
/
:
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:
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:
Select it and then select the User entity to browse the data:
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:
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.