Axios fetcher(METHOD POST) + NextJs SSR = Infinite Endless API calls

Using Method POST in Axios fetcher results in Endless API calls

Description / Observed Behavior

Using Method POST in Axios fetcher results in Endless API calls.

When using fetcher like

const fetcher = (url, data) => axios.post(url, data).then(res=>res.data)
const {data, error} = useSWR(['/api/v1/reports/statistics', data], fetcher)

Endless API calls. Infinite calling

But this happens only in SSR. And works fine with client Side rending.

Expected Behavior

Make only one API call during the server side rendering

Repro Steps / Code Example

const fetcher = (url, data) => axios.post(url, data).then(res=>res.data)

const StatisticsTable = ({criteria={}}) => {

    const {data, error} = useSWR(['/api/v1/reports/statistics', criteria], fetcher)

return <div>{data}</div>
}

Additional Context

SWR version - 0.3.3 to 0.3.5

[promer94]

// Don’t do this! Deps will be changed on every render.
useSWR(['/api/user', { id }], query)
// Instead, you should only pass “stable” values.
useSWR(['/api/user', id], (url, id) => query(url, { id }))

https://swr.vercel.app/docs/arguments#passing-objects

Hope this will help

[huozhi]

@vishnuvchandar I tried on your codesanbod example, the issue is when you pass an object to useSWR as first argument within next.js, each time the hashed key will be different

the weakmap in hash lib looks like following

the solution to this could be

+const payload = { test: "message" }
export default function DayPage() {
-  const { data, error } = useSWR(["/api/v1/day", { test: "message" }], fetcher);
+  const { data, error } = useSWR(["/api/v1/day", payload], fetcher);
  return <div>Hello Day {data}</div>;
}