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

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 })
 } 
}

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) ?

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…

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 !

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.

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