How to modify data that getting from SWR

[keidarcy]

How to migrate this use case to SWR?
Thanks in advance!

const [value, setValue] = useState('')

useEffect(() => {
  const fn = async (() => {
    const {data} = await axios.get(API)
    setValue(data)
    }
  fn()
  }, [value])

return <input value={value} onChange={(e) => setValue(e.currentTarget.value)} />

[huozhi]

you can make the async fn() as fetcher argument for swr, and use value as key. like

const {data} = useSWR(key, async () => { const {data} = await axios.get(API); return data; })

@xyyolab do you mind providing more information about the use case? when user input sth, changes will lead to a new get request and the response data, which will change the value again and it will go into the new cycle?

[keidarcy]

Thanks for your response!
I'm making a detail page with a form that gets data from API like below.
There is only one submit button with a post request to update(don't need to re-fetch data after load everything).

I figure out this possible way to do my job.

I'm new to SWR which is great! Do you have any advice on this situation?

function productDetail () {

  const [value, setValue] = useState('')
  const [fetched, setFetched] = useState(false)
  const fetcher = (url) => fetch(url).then((r) => r.json())
  const { data } = useSWR(GET_API, fetcher)
  const handleClick = async () => {
     await axios.post(POST_API, {value})
  }

  useEffect(() => {
      if (data) {
        setValue(data.value)
        setFetched(true)
      }
  }, [data])

  if (!fetched) return <div>loading</div>
  return (
    <>
      <input value={value} onChange={(e) => setValue(e.currentTarget.value)} />
      <button onClick={handleClick}>submit</button>
    </>
  )
}

[huozhi]

thanks I think I understand your approach here 😄 looks great. not sure if the fetched could be replaced with isValidating return from useSWR I guess?

const {data, isValidating} = useSWR

if (isValidating) return <div>loading</div>

[sergiodxa]

You need to use the mutate function, either the one returned by useSWR with the key already applied if the one exported by the library without the key already applied.

import { mutate } from “swr”

mutate(key, oldData => newData, false)

Or

const { mutate } = useSWR(key, fetcher)
// ...
mutate(oldData => newData, false)

[keidarcy]

@sergiodxa
Could you please help me with this full use case?

I think I need to use mutate, but still not sure how to implement it.

function ProductDetail () {

  const [value, setValue] = useState('')
  const [fetched, setFetched] = useState(false)
  const fetcher = (url) => fetch(url).then((r) => r.json())
  const { data } = useSWR(GET_API, fetcher)
  const handleClick = async () => {
     await axios.post(POST_API, {value})
  }

  useEffect(() => {
      if (data) {
        setValue(data.value)
        setFetched(true)
      }
  }, [data])

  if (!fetched) return <div>loading</div>
  return (
    <>
      <input value={value} onChange={(e) => setValue(e.currentTarget.value)} />
      <button onClick={handleClick}>submit</button>
    </>
  )
}

[sergiodxa]

Something like this should do the work:

const fetcher = (url) => fetch(url).then((r) => r.json());

function ProductDetail() {
  const { data, mutate } = useSWR(GET_API, fetcher, {
    revalidateOnFocus: false, // disable onTabFocus revalidation
  });

  const handleClick = async () => {
    await axios.post(POST_API, { value: data });
    mutate(); // revalidate data
  };

  function handleChange(event) {
    // mutate the data without revalidating it
    mutate(event.currentTarget.value, false);
  }

  if (!data) return <div>loading</div>;

  return (
    <>
      <input value={data} onChange={handleChange} />
      <button onClick={handleClick}>submit</button>
    </>
  );
}

[radomir-mijovic]

You need to use the mutate function, either the one returned by useSWR with the key already applied if the one exported by the library without the key already applied.

import { mutate } from “swr”

mutate(key, oldData => newData, false)

Or

const { mutate } = useSWR(key, fetcher)
// ...
mutate(oldData => newData, false)

Thanks man, this is what i was looking for