How can i use useSwr hook with Post method

[ghost]

hi guys,
Im confused,
Is swr hook only work with get Method?
I've tried alot to get data with post method in swr , but i coulnt ,
Im using next js , i get data in getiinitialprops(with post method) and pass it to initialData,
It doesnt work when i change the routes ... how can we use it with post method to cache api?

[sergiodxa]

Technically it should be possible to use it with any HTTP method, what method you use in your fetcher is not a concern of SWR, however usually POST modified somehow the data server side (eg creating a new resource) so it’s bette to use GET, if you know your API ask you to use POST to read data you can use it, just be aware that SWR may call your fetcher function again anytime and that could have side effects if your API call is not idempotent.

[maapteh]

You can adjust your fetcher like so:

export const fetcher = async (
  url: string,
  payload?: string,
) => {
  const options = {
    method: payload ? "POST" : "GET",
    ...(payload && { body: payload }),
    headers: {
      accept: "application/json",
      "Content-Type": "application/json",
    },
  };

  return fetch(url, options).then(r => r.json());

};

Now it accepts payload, when there is payload it assumes you want to POST it. Make sure payload is not an object else it will recreate new one and continue posting :)

Example usage:

const { data, isValidating, mutate } = useSWR<Foo>(
	[
		`${config.api.foo}/bar`,
		JSON.stringify({ id: item.id }),
	],
	fetcher,
	{
		revalidateOnFocus: false,
	},
);

Like Sergio is mentioning its only meant to use where your method needs to be a post but actually is about retrieving data.

[vietnguyen09]

Thanks mate, you save my life

[bsaisushanth99999]

what is "FOO" in this?

[bsaisushanth99999]

[shuding]

We have this PR working in progress: #1450, please take a look and any feedback is welcome!

[hemantsan]

what is "FOO" in this?

its for showing where to set typescript generic