Setup Silverstripe 4 together with GraphQL 4

This section describes the process of setting up a Silverstripe 4 project together with GraphQL 4

Prerequisites

The following is needed to be able to follow this guide:

• Composer (A dependency manager for PHP)
• A local server environment (For example MAMP, Docker)

Setup

Open up a terminal inside your chosen project folder and run:

composer require silverstripe/recipe-core

This will install a base framework-only recipe for Silverstripe. This recipe includes the core modules framework, config and assets. 

Then run:

composer require silverstripe/admin:1.8.0 

This module provides a basic management UI for the Silverstripe framework. Allows authors to manage their profile as well as members with their group and permission assignments.

Thereafter run:

composer require silverstripe/graphql:4.x-dev

This module serves SilverStripe data as GraphQL 4 representations, with helpers to generate schemas based on SilverStripe model introspection.

Then run:

composer require silverstripe/asset-admin:1.8.3

This module provides an interface for managing files within SilverStripe CMS assets module. 

Finally run: 

composer require silverstripe/graphql-devtools:dev-master --dev

This module adds an implementation of graphiql, an in-browser IDE for GraphQL servers. It provides browsable documentation of your schema, as well as autocomplete and syntax-checking of your queries.

The order you install these modules in, are of most importance to make sure they work properly together with graphQL 4. Some of these modules are of course optional depending on what your are going to build but are included here as to provide an example of how to install common Silverstripe modules together with graphQL 4 including stable versions of them.

That said, we are now ready to use Silverstripe 4 together with GraphQL 4.

Usage

This section will guide you through how to add data to your Silverstripe project to then query that data using GraphQL 4.

Adding data to the Silverstripe project

Let us now add some data to our project that we will use to test our GraphQL queries with! But first let us make sure we can build our database as well as login to the admin page properly. 

Assuming you already have your local server environment up and running (in my case at http://localhost:8080), open up a browser and type:

http://localhost:8080/dev/build

Which will build the database for us.

Thereafter let us make sure you are able to login to the admin page using your credentials specified in your .env file. Open up a new tab in your browser and type:

localhost:8080/admin

Use your admin username and password to login.

Let us now add a DataObject class and a ModelAdmin class to enable us to later add our data to the project. Inside the "app" folder create a folder called "src"

Inside this new folder create two new folders called "ModelAdmins" and "DataObjects". Inside the DataObjects folder add a php file called "Item.php" with the following code:

Thereafter, inside the ModelAdmins folder, add a file called "ItemAdmin.php" with the following code:

This will add a new segment in the admin page where you can add data to the "Item" table.

Inside your browser run the following command to build the database:

http://localhost:8080/dev/build/?flush

You should now be able to see a new tab inside the admin page called "Item".

Let us now add some data. Go to the Item tab inside the admin page and press the "add item" button.

Query the data using GraphQL 4

To query our data using GraphQL we are going to create our schema and activate the default graphQL controller.

To create our schema add a file called "graphql.yml" inside the app/_config folder. Add the following code to this config file:

Inside this graphQL IDE, type the following query and press the play button to retrieve the data we previously added to our project:

Joined Silverstripe VueJS application

This section describes how to setup a joined Silverstripe and VueJS project.

Prerequisites

The following is needed to be able to follow this guide:

• Composer (A dependency manager for PHP)
• A local server environment (For example MAMP, Docker)
• Vue CLI

Adding VueJS as a Silverstripe template

To be able to join our Silverstripe backend with our VueJS frontend we are going to add our VueJS app as a Silverstripe template.

Create a new folder called "Controllers" inside the "app/src" folder. Inside the "Controllers" folder, add a new file called "RootController.php" and add the following code:

Create a new folder in your project root directory called "themes". Open a terminal inside this folder and type the following to generate a VueJS project called "vue-app":

vue create vue-app

Create a new config file, inside the Silverstripe project's app/_config folder, called "theme.yml" and add the following code to add the VueJS app as a theme:

Move the terminal inside the vue-app folder and run the following script to build the project:

npm run build

By running this script we have now generated our build files located inside our VueJS application folder called "dist". 

Next step is to serve these build files to our Silverstripe project as templates, create a new folder inside the VueJS application called "templates".

Since build files use file name hashing we need to be able to dynamically change the name of the build files served as templates to the Silvertripe project after each build. We therefore create a new file called "templateGenerator.js" inside the VueJS application's root folder and add the following code: 

Let us now add some scripts to our package.json inside our VueJS application to automatically run this "templateGenerator.js" file whenever we build our VueJS application. Your scripts should now look like the following code:

Open a terminal inside the VueJS application and run the following script.

npm run build

Inside your browser run the following script to rebuild the Silverstripe project.

http://localhost:8080/dev/build/?flush

We are now done and ready to test it out! Visit http://localhost:8080 to see the VueJS application served as a template to the Silverstripe project.

Passing data from backend to frontend using GraphQL 4

Let us now pass some data from our backend to our frontend using graphQL 4. This tutorial will not handle authorization and we will therefore let any user read data from our data object. Add the following code at the end of the file we previously created called "Item.php":

Lastly let us add a simple method to our VueJS application app.vue file, that will fetch our data and print it out in the console.