How to create entities through POST correctly when using SWR?

[vovkvlad]

Hi! I'm a newbie to SWR and having a general-idea problem I hope someone could help me resolve.

So on my project, I'm using SWR+axios for fetching resources. And everything went well until I came across a situation when I need to create entities.
So assume that I have 2 API routes:

• GET/api/entities/ - will return the list of entities
• POST /api/entities - will create a new entity with data provided in POST.

So the creation of the entity follows the next UI scenario in the app: the user goes to a separate page, fills in a form, and upon clicking the submit button POST to /api/entities should be sent. (and it is possible that the user haven't triggered GET /api/entities/ before creating a new one)

I've tried to use SWR's mutate for that, and instead of standard axios fetcher: (url) =>axios.get(url).then((response) =>response.data); use similar one but with axios.post() but it doesn't seem to be working:

const response = await mutate(['/api/testSuites/', payload], (url, payload) => {
    return axios.post(url, dataObject).then((response) => response.data);
});

I've read the documentation (and especially the Mutation part) several times already and still couldn't get the idea of what am I doing wrong...

My thoughts on this are next: I'm not doing mutation here basically, but rather creating a new entity from a scratch, so probably SWR's mutate is not a good way to go. But if that's true, then what is the best way to complete my task? just do straight-forward axios.post() without any SWR?

Please let me know if I am missing some core-concept of SWR here
Thanks in advance!

[tino-brst]

I'm currently dealing with something that seems similar, maybe it helps (or maybe there is a much easier way that I'm not seeing either 😅). I'm writing a hook to register/get the view count on a page, where the new view is registered via a POST request. I wanted to replace the first default useSWR fetch with a POST request, but keep the subsequent ones that useSWR does on focus etc (the comment below has more details). This is what I ended up with:

// As soon as we visit a page, we want to register the new view, and get the
// total (previous visits + ours). By default, useSWR will do a fetch to get the
// views, but that first value we get is off by one, since it's not taking into
// account our visit. We want to skip that default first request
// ({revalidateOnMount: false }), and do a POST instead, which is gonna register
// the new view and return the right view count. With that, we can trigger a
// data update via mutate (skipping revalidation once again, since it's an up-to-date
// value).

function useViewCount(slug) {
  const { data, error, mutate } = useSWR(
    `/api/views/${slug}`,
    { revalidateOnMount: false }
  )

  React.useEffect(() => {
    const updateViewCount = async () => {
      const response = await fetch(`/api/views/${slug}`, { method: 'POST' })
      const data = await response.json()
      return data
    }

    mutate(updateViewCount, false)
  }, [slug, mutate])

  return {
    viewCount: data?.viewCount,
    isLoading: !data && !error,
    isError: error !== undefined,
  }
}