Using StateFlow

StateFlow service manages the state transitions of data defined in Tailor DB.

As the diagram below shows, we'll introduce you to State using the StatFlow created in the previous page.

Tutorials – Use StateFlow

Tutorial steps

Create a record for the StateFlow.
Create a State for the StateFlow.
Move a State to proceed the StateFlow.

The diagram below illustrates the relation among Supplier, State and StateFlow. If you haven't created a StateFlow, see Creating StateFlow.

Tutorials – Use StateFlow State

1. Create a record for the StateFlow.

First of all, let's create a record to manage with the defined StateFlow. We created Inventory-tracker app in Quickstart, so let's create a Supplier record with this mutation.

<span><span style="color: var(--shiki-token-comment)"># Create a new Supplier record</span></span>
<span><span style="color: var(--shiki-token-keyword)">mutation</span><span style="color: var(--shiki-color-text)"> {</span></span>
<span><span style="color: var(--shiki-color-text)">  createSupplier(input: { </span><span style="color: var(--shiki-token-string)">name</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-string-expression)">&quot;Atlas Industrial Supply&quot;</span><span style="color: var(--shiki-color-text)"> , </span><span style="color: var(--shiki-token-string)">code</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-constant)">1234</span><span style="color: var(--shiki-color-text)"> }) {</span></span>
<span><span style="color: var(--shiki-color-text)">    id</span></span>
<span><span style="color: var(--shiki-color-text)">  }</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>
<span></span>

2. Create a State for the StateFlow.

To manage this record with defined StateFlow, we need to create a State in the StateFlow service. State is used to manage a state of the StateFlow for a record in your schema. Each State is associated with a particular record and transitioning the State changes the step of that record according to the defined StateFlow.

So, let's create the State to manage your Supplier record with the defined StateFlow. We will use the StateFlow ID created in Creating StateFlow.

<span><span style="color: var(--shiki-token-keyword)">mutation</span><span style="color: var(--shiki-color-text)"> {</span></span>
<span><span style="color: var(--shiki-color-text)">  newState(</span></span>
<span><span style="color: var(--shiki-color-text)">    input: {</span></span>
<span><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-string)">resourceId</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-string-expression)">&quot;Supplier ID we got with createSupplier mutation&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-string)">stateFlowId</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-string-expression)">&quot;The sample StateFlow ID we created&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">    }</span></span>
<span><span style="color: var(--shiki-color-text)">  ) {</span></span>
<span><span style="color: var(--shiki-color-text)">    id</span></span>
<span><span style="color: var(--shiki-color-text)">    currentState</span></span>
<span><span style="color: var(--shiki-color-text)">  }</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>

3. Move a State to proceed the StateFlow.

Once you created the State, you work with this State to manage your record with the StateFlow. In Setting up StateFlow, we created the StateFlow with these steps.

<span><span style="color: var(--shiki-color-text)">steps: [</span></span>
<span><span style="color: var(--shiki-color-text)">  {</span></span>
<span><span style="color: var(--shiki-color-text)">    id: </span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-string-expression)">registration</span><span style="color: var(--shiki-color-text)">&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">    name: </span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-string-expression)">This is the initial state of StateFlow.</span><span style="color: var(--shiki-color-text)">&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">    transitions: [{ action: </span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-string-expression)">approve</span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> destination: </span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-string-expression)">approved</span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-color-text)"> }]</span></span>
<span><span style="color: var(--shiki-color-text)">  }</span></span>
<span><span style="color: var(--shiki-color-text)">  { id: </span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-string-expression)">approved</span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
<span><span style="color: var(--shiki-color-text)">    name: </span><span style="color: var(--shiki-color-text)">&quot;</span><span style="color: var(--shiki-token-string-expression)">Two step StateFlow is finished</span><span style="color: var(--shiki-color-text)">&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">  }</span></span>
<span><span style="color: var(--shiki-color-text)">]</span></span>
<span></span>

That means, we only have 2 steps and the action to proceed the StateFlow is "finish". To update the State, we use moveState mutation with defined action. Here's the mutation to proceed the step.

<span><span style="color: var(--shiki-token-keyword)">mutation</span><span style="color: var(--shiki-color-text)"> {</span></span>
<span><span style="color: var(--shiki-color-text)">  moveState(input: { </span><span style="color: var(--shiki-token-string)">stateId</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-string-expression)">&quot;&lt;your-state-id&gt;&quot;</span><span style="color: var(--shiki-color-text)">, </span><span style="color: var(--shiki-token-string)">action</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-string-expression)">&quot;approve&quot;</span><span style="color: var(--shiki-color-text)"> }) {</span></span>
<span><span style="color: var(--shiki-color-text)">    state {</span></span>
<span><span style="color: var(--shiki-color-text)">      id</span></span>
<span><span style="color: var(--shiki-color-text)">      currentState</span></span>
<span><span style="color: var(--shiki-color-text)">    }</span></span>
<span><span style="color: var(--shiki-color-text)">    success</span></span>
<span><span style="color: var(--shiki-color-text)">  }</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>

<span><span style="color: var(--shiki-color-text)">{</span></span>
<span><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">&quot;data&quot;</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-color-text)"> {</span></span>
<span><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">&quot;moveState&quot;</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-color-text)"> {</span></span>
<span><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-keyword)">&quot;state&quot;</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-color-text)"> {</span></span>
<span><span style="color: var(--shiki-color-text)">        </span><span style="color: var(--shiki-token-keyword)">&quot;id&quot;</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;&lt;your-state-id&gt;&quot;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
<span><span style="color: var(--shiki-color-text)">        </span><span style="color: var(--shiki-token-keyword)">&quot;currentState&quot;</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;approved&quot;</span></span>
<span><span style="color: var(--shiki-color-text)">      }</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
<span><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-keyword)">&quot;success&quot;</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">true</span></span>
<span><span style="color: var(--shiki-color-text)">    }</span></span>
<span><span style="color: var(--shiki-color-text)">  }</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>

The result of currentState will be "approved" and the StateFlow step for this State is finished. Once the step becomes "approved", the state of the State is finalized so that it won't be changed anymore.

Now that you've already set up the StateFlow and gone through the whole process to complete it, congratulations!

Further Information

For more technical details and further customization, please refer to StateFlow service.