Use After and Before Cursor Properly in a Front-End App

Help
1

Hi people!!

Currently, I am developing a front-end app in Next.js, but I need to figured out how can use the before and after cursor results without using a UDF in a graphql query, this is an example of what I try to do in my Api call:

export default async (req, res) => { 
 const { after, before } = req.body;
 try {
  const data = await client.query(
   q.Let({
    match: q.Match(q.Index('some_index')),
    after,
    before,
    page: q.If(
     q.Equals(q.Var("before"), null),
     q.If(    
      q.Equals(q.Var("after"), null),
      q.Paginate(q.Var("match"), { size: 10 }),
      q.Paginate(q.Var("match"), {
       after: q.Var("after"),
       size: 10,
      })
     ),
     q.Paginate(q.Var("match"), {
      before: q.Var("before"), 
       size: 10,
      })
    )
   },
   q.Var("page")
  )
 )
 res.status(200).json(data)
} catch (error) {
  res.status(500).json({ error: error.message })
 } 
}
2

Hey ! Can you provide more information of how you call this query ? (A proper example)
Also how is the q.Index('some_index') implemented (which is somewhat important) ?

3

Hi @n44ps sorry for my ambiguous question, I want to know how to handle before and after cursor in a frontend application only using fauna FQL, for example in my API using a query similar to this:

Query(
    Paginate(
        Match(Index('index_of_values')),  
        {size: 10}
    )
)

Using this query as an example, the first call returns the appropriate cursor (after), I want to know how to implement the cursor to use it in the next operation…

4

Alright so I guess this is straightforward :

Fauna will ignore before and/or after if they are null ! So you don’t really need to use the If :slight_smile: Here is the link to the documentation

export default async (req, res) => { 
  const { after, before } = req.body;
  try {
    const data = await fauna.query(
      q.Paginate(q.Var('match'), {
        before, // ignored if null
        after, // ignored if null
        size: 10,
      }),
    );
    res.status(200).json(data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

Hope it answer your question !

5

If your result set spans three pages of results, and you have just requested paged 2, that response will contain both a before and an after. You should not specify both in a query, and only your application logic knows whether it wants to move forward or backwards through the pages.

As @n44ps notes, before and after are ignored if null, but your logic should nullify whichever parameter is appropriate for the direction of pagination that is in use.

6

Thanks for the help @n44ps and @ewan !!!

7

hi @ewan , maybe this is an old topic, but I still figured out the best way to use the he before and after cursor dynamically from the client side, maybe in a useEffect function or with another data fetch library like swr… in a pure front-end app using nextJS… any guide for this??

8

We don’t provide any framework-specific examples. There are so many in use… we simply don’t have enough resources to cover them adequately.

Handling pagination is, typically, a sequential task. You might know head of time how many entries exist, but probably not where all of the page boundaries lie. In this respect, Fauna is not very different from other APIs where values in one response need to be used in a subsequent query. There are likely examples for your framework that demonstrate the principles/practices involved in such a workflow, and which should be amenable to modification to handle Fauna queries.

Hopefully, someone else can provide an example for you.

9

Thanks @ewan for your help!!!

10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.