Digging
Superglue's thunks work hand-in-hand with PropsTemplate to query your JSON template for nodes. This guide helps you understand how the tools work with each other.
The props_at param
The props_at
param is a keypath to nodes in your tree and is used almost exclusively with the remote
thunk. On the PropsTemplate side, we pass that param over to an internal node in order to walk your templates.
?> props_at
can be used with data-sg-visit
, but only combined with data-sg-placeholder
to build placeholders.
For example, with a template below.
To fetch the json.search
node, we would need to walk to data
then header
then search
. Translating that to a remote call with a props_at
param:
Collections
There are two ways to query collections. Looking at the following example:
Index-based selection
You may use an index-based key to fetch an item in a list like so:
To enable this functionality, you are required to implement member_at(index)
on the passed collection.
?> PropsTemplate includes a Array
extension which delegates to at
. If you've used the Superglue generators, it will be included in an initializer.
While traversing by index works fine, it can lead the wrong post being updated if your Redux state has changed by the time the request comes back.
Attribute-based selection
Attribute-based keys for collections look like this:
Notice that we're now referencing the collection member by some_id=1
instead of index. This will fetch the node from the backend and graft it correctly in Redux.
To enable this, you are required to implement member_by(attribute, value)
on the passed collection AND use the option :key
in json.array!
. For example:
Partials
You can even query into partials.
!> When querying, Superglue will disable caching and deferment until the target node is reached.
That's the basics of traversing with Superglue. Many modern SPA functionality can be achieved by just a few lines of code. For examples, see our recipes section.
Last updated