How can I make a post request with SWR when I click the button?

[SelfDevTV]

Hi,

I have an upvote button that calls my upvote function with argument of type UPVOTE or DOWNVOTE. Then I make a post request to my api.

I can't use useSWR in this function since hooks cant be used inside functions.

const { data } = useSWR("/api/post/vote", (url) =>
      postData(url, { postId: post.id, type }) // can't use because type is a function argument that I just have when button gets clicked
    );

How can I :

• run the post request only when I click on the button
• pass in the type prop to my fetcher through useSWR

I want to use swr for deduping. So when the user clicks 10 times very fast on the vote button it just refetches it after few seconds and just mutating the local cache.

Thank you guys!

[scucchiero]

I believe SWR (stands for stale-while-revalidate) is purposed to fetch data only. Personally, I don't see a clean way to match your use case with useSWR.

You'd have to bypass many features to repurpose it for mutating

- Fast, lightweight and reusable data fetching
- Built-in cache and request deduplication
- Polling on interval
- Revalidation on focus
- Revalidation on network recovery

You could fetch the votes using useSWR and then mutate when the user upvotes/downvotes locally, but the remote mutation using an outside function.

  const { data: votes, mutate } = useSWR(key, fetcher)
  const vote = async () => axios.post(............)

   .........

   <Button
    label='downvote'
    onClick={() => {
       vote()
           .then(() => mutate())   
    }}
    />

[SelfDevTV]

Hi @scucchiero

Thx for your answer.
I solved it like this:

const [type, setType] = useState(null);

  const { data } = useSWR(type ? "/api/post/vote" : null, (link) =>
    postData(link, type)
  );

And in my onClick function I call setType(type) after mutate.
Works like a charm so far also with deduping.

[carlbarrdahl]

Here's another way to do it. Use SWR for GET requests and react-use's useAsyncFn for POST requests and then invalidate the SWR cache with mutate from useSWRConfig

function useCreate() {
    const { mutate } = useSWRConfig();
    // Use react-use's useAsyncFn for post requests
    return useAsyncFn(async () => {
        // Call API
        // ...
        // Trigger a refresh
        mutate("/api/list")
    })
}

function useList() {
    // Use SWR to fetch data
    return useSWR("/api/list", fetcher);
}

[shuding]

Hi all! There is a new hook useSWRMutation added to the 2.0 version (currently in beta): https://github.com/vercel/swr/releases/tag/2.0.0-beta.0

A quick look:

import useSWRMutation from 'swr/mutation'

async function sendRequest(url, { arg }) {
  return fetch(url, {
    method: 'POST',
    body: JSON.stringify(arg)
  })
}

function App() {
  const { trigger } = useSWRMutation('/api/user', sendRequest)

  return <button onClick={() => {
    trigger({ username: 'johndoe' })
  }}>Create User</button>
}

[maakle]

Just tried it out and dumped react-query for it. It's 🔥!

[saideep1011]

hey do we configure this totally on app.tsx file..
<SWRConfig value={{ fetcher: (...args) => axios(...args).then((res: { data: any; }) => res.data) }}> <Component {...pageProps} /> </SWRConfig>
there are mutliple request types i want to use globally is it possible ?
thanks

currently