-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
98 additions
and
0 deletions.
There are no files selected for viewing
Binary file added
BIN
+72.5 KB
...post/2024/04/drupal-graphql-installation/images/acquia_cms_headless_backend.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+141 KB
content/post/2024/04/drupal-graphql-installation/images/graphql_explorer.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
--- | ||
title: Installation of GraphQL | ||
date: 2024-04-19 | ||
author: Miloš Rajčić | ||
tags: ["drupal", "graphql", "acquia", "drupal-planet"] | ||
--- | ||
|
||
If you wish to start a new Drupal project with GraphQL or add it to the existing one I would wholeheartedly recommend using Acquia CMS Starter Kit that is specifically designed for the headless approach. | ||
There are fewer options in this CMS (e.g. no theming options) so that you can dedicate as much time as possible to the headless option. Acquia CMS is intended to preconfigure Drupal to serve structured, RESTful content to mobile apps, smart displays, frontend driven websites, etc. | ||
|
||
Acquia has this amazing guide on how to install said CMS, but don’t you worry I will give you a speed ride here. | ||
|
||
So, to install a new project via composer you would use the following command: | ||
|
||
`composer create-project acquia/drupal-recommended-project my_project` | ||
|
||
The headless starter kit is available in the project by default. If you wish to add it to the existing project via composer, you would be using the following command: | ||
|
||
`composer require acquia/acquia-cms-starterkit` | ||
|
||
Once that is done you need to run the following command: | ||
|
||
`./vendor/bin/acms acms:install` | ||
|
||
When you start this command you will be asked to choose what you wish to install and to answer some questions so that the CMS can be configured to your needs right away. | ||
You would of course choose **acquia_cms_headless** and after that you can choose whether you want demo content, all the content types, if you wish to install next.js (a flexible React framework), Google Maps API Key and database information (name, driver, username, password, host and port). | ||
|
||
Your project needs to be setup so that the Drupal core, modules and so on are located in the `docroot` folder. If you have any other setup (e.g. Drupal in `web`) the install process won’t work! | ||
|
||
When the installation is done you will see the following screen. | ||
|
||
{{< figure link="images/acquia_cms_headless_backend.png" caption="Acquia CMS Headless Backend" alt="Acquia CMS Headless Backend" >}} | ||
|
||
To reach the GraphQL part follow this path: `System administration > Configuration > Web services > GraphQL` (/admin/config/graphql) | ||
|
||
There you need to create a new server (for example movies, books, articles, etc), choose your schema (in [the next blog post](/post/2024/05/drupal-graphql-how-to-create-a-new-schema/) we will see how to create a custom schema, but for the moment stick with the default one). | ||
|
||
Once you are done with that, click on **Save** and then return to the just created server by using the **Edit** option. | ||
|
||
There you will find the Explorer option. This is your best friend when it comes to working with GraphQL. Here you can write queries and test your schema. | ||
|
||
{{< figure link="images/graphql_explorer.png" caption="GraphQL explorer in Drupal" alt="GraphQL explorer in Drupal" >}} | ||
|
||
Now that you know how to install and use Acquia CMS Starter Kit the next part is how to retrieve content using GraphQL. In the following blog post I will talk more about that, so stay tuned! |
54 changes: 54 additions & 0 deletions
54
content/post/2024/05/drupal-graphql-how-to-create-a-new-schema/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
--- | ||
title: How to create a new schema in GraphQL | ||
date: 2024-05-10 | ||
author: Miloš Rajčić | ||
tags: ["drupal", "graphql", "drupal-planet"] | ||
--- | ||
|
||
In order to access data from your own content types you need to create an access point which is based on a schema. A schema defines a hierarchy of types with fields that are populated from your backend data stores. | ||
The schema also specifies exactly which queries and mutations are available for clients to execute. | ||
|
||
The first step that is recommended, is to create a custom module in Drupal like you would normally do. | ||
After that you need to copy the examples files from the example module that comes with GraphQL. The most 3 files that you need are: | ||
* `yourModuleName.graphqls` | ||
* `yourModuleName_extension.base.graphqls` | ||
* `yourModuleName_extensio.extension.graphqls` | ||
|
||
|
||
The file `yourModuleName.graphqls` (example: movie.graphqls) represents your schema where you need to define your queries for your Drupal content type "Movie". | ||
One example of a query would be: | ||
|
||
``` | ||
# Query definition | ||
schema { | ||
query: Query | ||
} | ||
# Connection to schema Movie | ||
type Query { | ||
movie(id: Int!): Movie | ||
movies( | ||
offset: Int = 0 | ||
limit: Int = 10 | ||
): MovieConnection! | ||
} | ||
# Movie query | ||
type Movie { | ||
id: Int! | ||
title: String! | ||
body: String! | ||
} | ||
``` | ||
|
||
In the first part we define that it’s a Query, which means that you’re using it to get the data. With Mutations we insert the data into the database, but that’s a story for another blog post. | ||
|
||
In the next step you make a connection to a certain schema. In this case to "Movie". | ||
|
||
And then you create the query itself by defining the data you want to retrieve. | ||
You need to specify data types. When you put the exclamation point at the end that means you are expecting only that data type and any other will throw an error. | ||
|
||
This is now your first simple schema. | ||
|
||
Now what you need are data producers. That is in a nutshell a php code in which you retrieve the data from the database and connect them with your fields in the schema. | ||
Thanks to this connection, users can retrieve the data. I will speak more about the data producers in the next blog post. |