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.