Edit

Structure

Let's start by structuring our App. First we will need to add the Router component to handle all the different paths. And for each path we will want a Route component.

You can delete the default children of each created component.

Now we configure each Route component. On the component settings tab we set the Label, Path and Default path settings for each of them:

Label	Path	Default Path
Home	/
Message	/message/:messageid	/message/default
PostMessage	/newMessage

We will be using the messageid as a parameter to fetch and show each individual message.

Starting with the Home Route we will add a Query component to get the data from our Graphql DB endpoint. Then to it we add a ReplicateList which will ease our job by replicating, with the help of it's parent, each instance of data (Message) received.

For each Message we will want to show its Title (which will be a link to the individual message) and Date, so we add the following components:

For the Message Route we will want also a Query component to fetch our Message and each component to display its previous data and the Description aswell:

At last the PostMessage Route as our form to submit new Messages, will have a State component with a child Form and this will have the following components for input:

So to wrap our structure, this is all we will need.