Retrieving and Presenting the Data on the Page
You can display the data on your page by building a query that gets the data from the database and then iterating over it with Liquid to show it on the page.
Getting the data from the database
Start with building a query that will pull the data from the item
table. Any filename will be good of course, but we found that for the sake of extending the query in the future you might consider saving the query in app/graphql/item/search.graphql
:
app/graphql/item/search.graphql
query item_search {
records: records(
per_page: 100
filter: {
table: { value: "item" }
}
sort: {
updated_at: { order: DESC }
}
) {
total_entries
results {
id
title: property(name: "title")
}
}
}
On line 1 you use the query
keyword for getting the data out of the database. The query name following the keyword is there mostly for your convenience.
On line 3, you set the maximum number of items you would like the database to return. You may consider any number, but keep in mind that the bigger it is, the more time it will take the platform to return the data. In this example, you probably won’t have a large number of items, but in the future you may consider using a pagination for larger datasets.
You wouldn’t get far without telling the query in which table to look for the data. That’s the purpose of the filter
keyword in lines 4 to 6. You want the results to come from the table called item
.
As a bonus, sort the results descending by the time they were created. This is what you are doing in lines 7 to 9.
Finally, define what data you want the query to return. Lines 11 to 14 define the number of results returned (this is what the total_entries
keyword does), and then in the actual results you need the id
and title
from your table.
Testing the query using GraphiQL
Before using the query on your page, it would be a good idea to test if it works the way you want it to.
To test the query, you are going to use one of the tools built in the pos-cli
. To start the tool, use the following command:
pos-cli gui serve <environment>
When the application is running, go to http://localhost:3333 in your browser and choose GraphiQL. Paste the GraphQL query you’ve just written to the text area on left. Pressing the big play button on top should result in the output of the query being presented in the right column.
Rendering the data on a page
Assuming you have a page that you want to present the data on, and the query that will get the data, request it using Liquid’s graphql
tag as follows in your app/graphql/item/search.graphql
file.
{% liquid
graphql items = 'item/search'
%}
You don’t have to use the full path to the GraphQL query as the platform knows where to look for those. That simple line will run the query and assign the results to the variable items
.
The results are in the form of a hash. If you are coming from the JavaScript or PHP world you might name those objects.
"records": {
"total_entries": 1,
"results": [
{
"id": "1",
"title": "Do the groceries"
}
]
}
When you have the array of items, use the for loop to iterate on it and render them on the page using Liquid:
app/views/pages/index.liquid
{% for item in items.records.results %}
<li>
{{ item.title }}
<form action="">
<button type="submit">Mark as done</button>
</form>
</li>
{% endfor %}
As you can see above, you are using single-line Liquid statements, which are different from the Liquid code blocks as you can get by with just the {% %}
.
This code will repeat whatever is between the {% for %}
and {% endfor %}
for every item you are getting back from the database. This is another pattern in Liquid – you are closing the tags with {% end<tag> %}
statement.
There is one more thing you could do: display some information when there are no items to show on the page. As you have requested the number of total_entries
in your GraphQL query, an if
statement using it would be enough:
app/views/pages/index.liquid
{% if items.records.total_entries == 0 %}
<div>There are no items in the list.</div>
{% endif %}
So, the final code of app/views/pages/index.liquid
would look like this:
app/views/pages/index.liquid
{% liquid
graphql items = 'item/search'
%}
<!-- list of items -->
<ul>
{% for item in items.records.results %}
<li>
{{ item.title }}
<form action="">
<button type="submit">Mark as done</button>
</form>
</li>
{% endfor %}
</ul>
<!-- information shown when the list is empty -->
{% if items.records.total_entries == 0 %}
<div>There are no items in the list.</div>
{% endif %}
<!-- form for adding new item -->
<form action="/item/create" method="post">
<input type="text" name="title">
<button type="submit">Add item</button>
</form>
<!-- link to the About Me page -->
<a href="/about">About Me</a>