Skip to content

Commit

Permalink
Restructure and rewrite parts about setting up schema (#1731)
Browse files Browse the repository at this point in the history
* Restructure and rewrite parts about setting up schema

* Cover  part about modules/core/status table

* Adjustments
  • Loading branch information
simplykatsa authored Oct 21, 2024
1 parent 0fdf525 commit ef23145
Show file tree
Hide file tree
Showing 18 changed files with 342 additions and 165 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ method: post
```
{% endraw %}

### Alert Note

{% include 'alert/note', content: ' When we use `{{ contact }}`, it simply prints the variable. This serves as an intermediate debug step to ensure that the `contact` variable contains all the necessary information. This includes the user input, allowing us to pre-populate the form with existing values so the user doesn’t have to fill everything again. Additionally, it helps us identify any errors, enabling us to explain what’s wrong with the current input.' %}

## Render the form again directly
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,44 +7,17 @@ converter: markdown

When the user submits valid input through the _Contact Us_ form, we need to perform a few actions:

* Store the contact data in the database.
* Send a confirmation email to the user (a simple static confirmation that their request was received.)
* Redirect the user to /contacts/thanks and display a simple “Thank you” message.
1. Store the contact data in the database.
2. Send a confirmation email to the user (a simple static confirmation that their request was received.)
3. Redirect the user to `/contacts/thanks` and display a simple “Thank you” message.

## Storing the contact details in the database
## Store the Contact Details in the Database

To store contact requests in the database, we need to create a new table. First, we will define the schema for this table.
To store contact requests in the database, we are using the `contact.yml` table created in the [Setting Up a Schema](/get-started/contact-us-tutorial/setting-up-a-schema) step.

## Create a table
With the schema in place, the necessary actions were integrated into the application. The goal was to validate the contact form and persist the valid data in the database. To achieve this, we created a GraphQL mutation in the `app/graphql/contacts/create.graphql` file during the [Saving Data in the Database](/get-started/contact-us-tutorial/saving-data-to-the-database) step to persist the contact data. This mutation is now used to store the contact data in the database!

Navigate to your project root and create a new directory named `schema`.

<pre class="command-line" data-user="user" data-host="host"><code class="language-bash">
mkdir app/schema
</code></pre>

Inside the `schema` directory, create a `contact.yml` file:

#### app/schema/contact.yml

```yml
properties:
- name: email
- name: body
```

By default, properties in this YAML file are treated as strings, so you don't need to specify the data types explicitly. This schema definition is enough to create the table.

## Test if the table exists in the database

After defining the schema, you can verify the table creation by accessing the database interface. Open your browser and navigate to [http://localhost:3333/database](http://localhost:3333/database). You should see the new table with email and body columns, both of which are strings:

{% # TODO: check size %}
<img loading="lazy" class="w-full" src="{{ 'images/get-started/contact-us-tutorial/database_contact.png' | asset_url }}" alt="Database interface showing the newly created table with email and body columns">

## Create the Execute command

Now that we have our schema in place, let's integrate these actions into our application by updating the necessary files and configurations. Our goal is to validate the contact form and persist the valid data in the database. To achieve this, we will create a Liquid file that executes a GraphQL mutation.
## Create `execute.liquid` file

First, create the `execute.liquid` file in the following directory:

Expand Down Expand Up @@ -203,83 +176,6 @@ Instead of these solutions, let’s rename everything to `object`:
```
{% endraw %}

## Create GraphQL Mutation

The final step is to create a GraphQL mutation to persist the contact data in the database. This involves creating the necessary directories and files to store the GraphQL mutation.

## Create the directory structure

Navigate to your project root and create the necessary folders for storing GraphQL files:

<pre class="command-line" data-user="user" data-host="host"><code class="language-bash">
mkdir -p app/graphql/contacts
</code></pre>

## Create the GraphQL mutation file

Inside the `app/graphql/contacts` directory, create a file named create.graphql

<pre class="command-line" data-user="user" data-host="host"><code class="language-bash">
app/graphql/contacts/create.graphql
</code></pre>

## Define the mutation

Open `app/graphql/contacts/create.graphql` and add the following mutation code:

#### app/graphql/contacts/create.graphql

```graphql
mutation contact_create($email: String!, $body: String!) {
record_create(
record: {
table: "contact"
properties: [
{ name: "email", value: $email }
{ name: "body", value: $body }
]
}
) {
id
email: property(name: "email")
body: property(name: "body")
created_at
}
}
```

Let’s break it down to see what happens:

```graphql
mutation contact_create($email: String!, $body: String!) {
```

This line defines the mutation `contact_create` and specifies that it requires two parameters: `email` and `body`, both of which are strings and must be provided (`!` indicates non-nullable).

```graphql
record_create(
record: {
table: "contact"
properties: [
{ name: "email", value: $email }
{ name: "body", value: $body }
]
}
) {
```

This block specifies the `record_create` mutation, which creates a new record in the `contact` table. The `properties` array defines the fields to be populated with the values of `$email` and `$body`.

```graphql
id
email: property(name: "email")
body: property(name: "body")
created_at
```

These lines define the fields that will be returned after the record is created. This includes the `id`, `email`, `body`, and `created_at` timestamp.


## Special arguments: args

In the context of platformOS, the `args` parameter serves as a special argument that can be either a hash or a string of arguments passed to the GraphQL query.
Expand Down Expand Up @@ -311,39 +207,4 @@ While for a small number of arguments, this may not seem particularly beneficial

To learn more about how `args` function, refer to the [examples provided](/api-reference/liquid/platformos-tags#graphql) in the Liquid Tags chapter of the documentation.

## Testing the mutation using GraphiQL

The GraphiQL interface allows you to simulate and verify your GraphQL mutation before fully integrating it into your application. Let’s test the mutation we created!

Navigate to the GraphiQL interface at [http://localhost:3333/gui/graphql/](http://localhost:3333/gui/graphql/). Paste the mutation code you have at `app/graphql/contacts/create.graphql` to verify its functionality.

Below the editor, find the section to add query variables. Paste the following JSON code into the variables section for the test:

```graphql
{
"email": "[email protected]",
"body": "Hello! This is my message"
}
```

Click the execute button and check the response to ensure that the mutation executed successfully. You should see a response containing the ID, email, body, and created_at fields, indicating that the record has been created in the database. The response should look something like this:

```graphql
{
"data": {
"record_create": {
"id": "9",
"email": "[email protected]",
"body": "Hello! This is my message",
"created_at": "2024-06-04T14:04:24.224Z"
}
}
}
```

To ensure the data has been correctly stored in your platformOS database, navigate to your database interface at [http://localhost:3333/database](http://localhost:3333/database). Search for the newly created contact record to confirm its presence and validate that the email and body fields have been correctly stored.

{% # TODO: check size %}
<img loading="lazy" class="w-full" src="{{ 'images/get-started/contact-us-tutorial/test_graphql_mutation.gif' | asset_url }}" alt="Testing GraphQL mutation in action">

{% render 'alert/next', content: 'Redirecting and Displaying a Thank you Message', url: '/get-started/contact-us-tutorial/redirecting-thank-you' %}
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ Let’s add a `function` tag to your `app/views/pages/contacts/create.liquid` fi
---
method: post
---
{% function contact %}
```
{% endraw %}
Expand All @@ -96,7 +97,7 @@ To use it, you need to make sure that the partial returns data using the `return
{% # TODO: check size %}
<img loading="lazy" class="w-full" src="{{ 'images/get-started/contact-us-tutorial/function_lsp_help.png' | asset_url }}" alt="LSP support for function tag">

If you previously added `Hello {% raw %}{{ context.params.contact }}{% endraw %}` for demonstration purposes, you can now remove it from the app/views/pages/contacts/create.liquid file. It was just a placeholder to illustrate passing data.
If you previously added `Hello {% raw %}{{ context.params.contact }}{% endraw %}` for demonstration purposes, you can now remove it from the `app/views/pages/contacts/create.liquid` file. It was just a placeholder to illustrate passing data.

## Specify the path to the partial

Expand All @@ -115,7 +116,7 @@ To use a `function` tag, you need to specify the path to the partial file that c

#### app/views/pages/contacts/create.liquid

`{% raw %}
{% raw %}
```liquid
---
method: post
Expand Down
Loading

0 comments on commit ef23145

Please sign in to comment.