Next.js Discord

Discord Forum

Mutating fetched data client side

Unanswered
Nile Crocodile posted this in #help-forum
Open in Discord
Nile CrocodileOP
Let's say I have history over articles which contains a visitor count. 

async function Visitor() {
  const history = await fetch("/history");

  return (
    <div>
      {history.map((x) => (
        <Link href={x.url}>
          {x.title} ({x.count})
        </<Link>
      ))}
    </div>
  );
}


When a user navigate to the a url which is shown in the history, how can I increment the count of that item without revalidating the entire fetch call? Something like mutate in useSWR..

2 Replies

Nile CrocodileOP
This might work;

  const histories = use(props.test);

  const { data: previousConversations } = useSWR<
    Awaited<ReturnType<typeof fetchPreviousConversations>>
  >('/history', () => Promise.resolve(histories ), {
    suspense: true,
    fallbackData: histories ,
  });
Using fallbackData does not add it to cache, so this did not work

    const dataNow = cache.get('/history') as State<
      Conversation[],
      unknown
    >;