Relay modern pagination without viewer - pagination

Hello i have done my server grapqhl api. Currently i'm stack on relay pagination in client. I searched many articles about that. And everywhere pagination done with viewer root query field. Which about it in docs said that field is unnecassary.
In other resourses:
query routesOrdersQuery {
viewer {
...Order_order
}
}
fragment Order_order on OrderType {
orders() #connection {
edges {
node {
}
}
}
In my case:
query routesOrdersQuery {
...Order_order
}
fragment Order_order on Query {
orders(first: $first) #connection(key: "Order_order") {
edges{
node{
id
}
}
}
}

I solved it. Assumption about spreading fragment in root query is not right.
Problem lays in Route render method.
<Route
render={({error, props}) => {
if(error) {
return <div>{error.message}</div>
} else if(props) {
return <Orders query={props} />
} else {
return <div>Loading...</div>
}
}}
...
/>
So use render instead of component. And it should render 3 different states. Otherwise it not work.

Related

How to conditional statements in action output in Bixby

Hi I want to go to another action by putting a conditional statement in the action output.
What should I do?
For example
action (~~) {
description (Validate items passed from javascript)
collect {
input (~~) {
type (~~)
min (~~) max (~~)
}
}
type(~~~)
output (items){
on-empty(items.item1){ // if items.item1 is empty.
replan { // go to case1Action.
intent {
goal : case1Action
value : ~~~~~
}
}
}else{ // else
replan { // go to case2Action.
intent {
goal : case2Action
value : ~~~~~
}
}
}
}
or I want to select the view according to the output value.(Actually this is the purpose of the question)
output (items){
if(items.item1 == "goFirstCase"){
// First case view
}else{
// Second case view
}
}
I think by "select a different view according to the output value" I presume you mean you want to change what shows on the screen? because a "view" actually is comprised of the dialog, layout, and conversation-drivers.
https://bixbydevelopers.com/dev/docs/dev-guide/developers/building-views.views
For majority of use cases, there's really only one result-view that will be used, and any of the three contents of a view can be changed based on your preferred conditions as the above answer suggests.
within a view you can have the three different components defined with these three blocks: message for dialog, render for layout, and conversation-drivers
using your example,
//in a result-view
message {
if (items.item1 == "firstCase") {
template-macro (firstCase-result-dialog) {//enter params}
}
}
render {
if (size(items) > 1) {
list-of (items) {
where-each (item) {
if (item == "firstCase") {
layout-match (item) {
mode (Summary)
}
// OR use layout-macro
layout-macro (firstCase-result-summary-thumbnail-card) {//enter params}
}
}
}
}
}
similar conditional work can be done on conversation-drivers of course.
In your case, you would not need on-empty in action, but use template-macro-def as briefly explained in https://corp.bixbydevelopers.com/dev/docs/dev-guide/developers/refining-dialog.dialog-macros
// template file one
template-macro-def (id1) {
params {
param (x) {
Type (Items) ....
}
// template file two
template-macro-def (id2) {
// param x is type Items
}
//view file
result-view {
match: Items(this)
// after some checking make sure is single item
// it is possible to use other condition like if (this.sub1 == 2)
if (exists(this.sub1)) {
template-macro (id1) {
param (x) { expression (this) }
}
}
else {
template-macro (id2) {
param (x) { expression (this) }
}
}
The above would be the recommended way to handle different views for same concept in Bixby.
on-empty in action would be used for the purpose of either replan or relax some search condition in order to avoid 0 result. Bixby does not support on-empty(key) {} syntax according to https://corp.bixbydevelopers.com/dev/docs/reference/type/action.output.on-empty and on-empty would only apply in your case if output(items) itself is empty and would not check any sub-property of items.
Another option.
instead to use 'on-empty' block, you can use 'throws - error'
in action model,
output (items) {
throws {
error (case1ActionError) {
on-catch {
replan {
intent {
goal : case1Action
value : ~~~~~
}
}
}
}
error (case2ActionError) {
on-catch {
replan {
intent {
goal : case2Action
value : ~~~~~
}
}
}
}
}
}
And, in js code,,
if (error condition1) {
throw fail.checkedError('case 1 error', 'case1ActionError')
} else if (error condition2) {
throw fail.checkedError('case 2 error', 'case2ActionError')
}
For fail, refer to https://bixbydevelopers.com/dev/docs/reference/JavaScriptAPI/fail#failcheckederrormessage-errorid-errorobj

how to pass along structure property via similar method to Bixby onclick

In a Bixby result-view on the Detail mode I want to provide the user with the option to select from one or more Actions and pass along a hidden parameter "identifier" that corresponds to a database field name to include in the http request made by the Action.
layout {
match: AltBrainsData (this)
mode (Details)
content{
section {
content {
image {
//aspect-ratio (16:9)
url {
template ("#{value(this.icon_image)}")
}
}
}
}
section {
content {
title-area {
slot1 {
text("[#{value(this.name)}]")
{style(Title_M)}
}
}
}
}
section {
content {
paragraph { value ("#{value(this.description)}") style (Detail_L) }
}
}
section {
content {
cell-card {
slot2 {
content {
order (PrimarySecondary)
primary ("Show me the latest news headlines")
}
}
on-click {
intent {
goal: altbrains.persistencetest.GetNews
value: altbrains.persistencetest.AltBrainsData("#{value(this.identifier)}")
}
}
}
}
}
...
I get an error saying that the value must be a primitive.
How can I accomplish this? Basically, I want the result "Detail" card to be populated with one or more possible Actions and each action should pass along this identifier to the corresponding function in code/.
A bit difficult to include all the necessary bits and pieces in Stack Overflow. The money part of the GetNews function is:
function getNews(AltBrainsData) {
const url = properties.get("config", "baseUrl") + "content"
console.log("i got this far and the url is ", url);
const query = {
apikey: properties.get("secret", "apiKey"),
q: "{\"" + "identifier" + "\":\"" + AltBrainsData.identifier + "\"}"
}
Change to the following:
on-click {
intent {
goal: altbrains.persistencetest.GetNews
value: $expr(this)
}
}
You can read more about $expr() syntax in expression language

Bixby: page might be empty warnings

I'm really stuck and don't know what to do.
I've never worked in Bixby Studio and got that warning "page might be empty".
I've seen two similar posts about this problem, but they didn't help me at all.
item-selection-question {
first warning--> if (isFirstNavPage(page) && isLastNavPage(page)) {
template ("")
second warning--> } else-if (!isLastNavPage(page)) {
template-macro (HANDS_FREE_OPTION_ITEM_SELECTION_MORE_PAGES)
} else {
template-macro (HANDS_FREE_OPTION_ITEM_SELECTION_LAST_PAGES)
}
}
overflow-statement {
template-macro (HANDS_FREE_OPTION_OVERFLOW_STATEMENT)
}
overflow-question {
template-macro (HANDS_FREE_OPTION_OVERFLOW_QUESTION)
}
page-marker {
third warning--> if (!isFirstNavPage(page) && isLastNavPage(page)) {
template-macro (HANDS_FREE_OPTION_LAST_OPTION) {
param (page) {
expression (page)
}
}
}
}
I had a similar warning for,
content {
template ("Here's #{value(audioInfo.audioItem[audioInfo.startAudioItemIndex].artist)}.") {
speech ("Here's #{value(audioInfo.audioItem[audioInfo.startAudioItemIndex].title)}[ from #{value(audioInfo.audioItem[audioInfo.startAudioItemIndex].artist)}].")
}
}
WARN audioInfo.startAudioItemIndex might be empty
I changed the above snippet to,
content {
if(exists(audioInfo.startAudioItemIndex)){
template ("Here's #{value(audioInfo.audioItem[audioInfo.startAudioItemIndex].artist)}.") {
speech ("Here's #{value(audioInfo.audioItem[audioInfo.startAudioItemIndex].title)}[ from #{value(audioInfo.audioItem[audioInfo.startAudioItemIndex].artist)}].")
}
}
}
And it no longer shows the warning.
Try and see if it helps.

Can you refresh an input-view?

I am trying to create an input-view that will refresh every few seconds. The goal is to have a few buttons that increment and the user will click on the buttons when the buttons reach a 100. However, it seems like the action is waiting for an input so it is not updating. I found on the documentation that you can refresh an input-view, but I can't find any examples of it.
This is the code that I want to update:
input-view{
match: State(state){
to-input: UpdateGame
}
message{
template ("#{value(state.display)}"){
speech ("#{value(state.say)}")
}
}
refresh{
spec{
delay-seconds (2)
with-request{
intent{
goal: UpdateGame
}
}
}
}
render{
selection-of (state.options){
where-each (option){
cell-card{
slot2{
content{
primary{
template ("#{value(option)}")
}
}
}
}
}
}
}
}
There is one example of result-view in this doc
result-view {
match {
Activity (this)
}
refresh {
if (!exists(this.receipt)) {
spec {
delay-seconds (5)
with-request {
intent {
goal: CheckRideShareStatus
value {$expr(this)}
}
}
}
}
}
conversation-drivers {
if ("this.status == 'Requested' || this.status == 'Confirmed'") {
conversation-driver {
template ("Cancel my Uber ride")
}
}
}
render {
layout-match (this) {
mode (Details)
}
}
}
Sorry I've not caught this question earlier.
I've just verified that this issue is fixed in 20B SDK release.
Please refer the release notes for details about other changes.

How do I get rid of all the "Warn this.name might be empty" warnings?

In my Cat.view.bxb file, I have some UI elements that are based on optional properties in the structure that have warnings attached to them.
WARN this.name might be empty
result-view{
match {
Cat (this)
}
render {
layout {
section {
content {
paragraph {
style (Title_XS)
value ("#{value(this.name)}")
}
}
}
}
}
}
The warnings serve to remind you that the UI elements you've defined will not be displayed if the optional properties are not present.
You should define an if(exists(this.name)) and define UI elements for when the optional elements are not available.
For example, your code would look something like the following:
result-view{
match {
Cat (this)
}
render {
layout {
section {
content {
if(exists(this.name)) {
paragraph {
style (Title_XS)
value ("#{value(this.name)}")
}
} else {
paragraph {
style (Title_XS)
value("No name!")
}
}
}
}
}
}
}
By doing so, you are addressing the root cause of the warning and creating a more responsive output for your users.
if (exists) works and is one way as articulated already and provides excellent context for the user. Another way that may be preferable in certain circumstances is to use the [] square brackets notation - if a section within square brackets renders null then the section is skipped. So for your example:
result-view{
match {
Cat (this)
}
render {
layout {
section {
content {
paragraph {
style (Title_XS)
value ("[#{value(this.name)}]")
}
}
}
}
}
}

Resources