setState based on SWR fetched data

[laurent512]

Hi everyone,

I am trying to display multiples graphs in a single chart.
To update the chart, I have a setState hook setChartOptions which include the serie I want to display.

With my code below , the chart stays empty.
Very likely because the initial state of the hook is not refreshed after data is loaded ; data remains undefined.

Could you explain me what is the best way to define a state based on data fetched from SWR?
(any example code would be very helpful)

Thank you so much

  function loadData(id) {
        const { data, error } = useSWR(`api/stock?id=${id}`, fetcher);
        return {
            data: data,
            isLoading: !error && !data,
            isError: error
        };
    }

  const myDataObject = {
        stockvalue: loadData(1),
        graph2: loadData(2),
        graph3: loadData(3)
    };

    const [chartOptions, setChartOptions] = useState({
        series: [
            {
                id: 'stockvalue',
                data: myDataObject['stockvalue'].data 
            }
        ]
    });

[shuding]

You don't need to put it in a state at all. You can just use myDataObject like a state.
But if you really want to trigger state updates, do it via useEffect:

useEffect(() => {
  setChartOptions(...)
}, [myDataObject['stockvalue'].data])

[laurent512]

Thank you for your answer.
Could you explain what do you mean with "you might not need this variable at all and just use myDataObject directly." ?

You mean not giving an initial value to the chart via useState({}) and directly doing setChartOptions { something_here_using_myDataObject) ?

[ErnestBrandi]

You don't seem to be familiar with what a state is in React and how to use it.
Basically it helps storing values between renderings but also triggering them.
Because of the use of SWR, there is an underlying uses of useState and this is why you can use the var myDataObject as a state directly (option 1).
Even if this is redundant, you can use another var (chatOptions) and then you would indeed need to call setChartOptions when data is fetched in order to trigger a re-render (option 2).

[MartinMuzatko]

I would not agree that swr exposes the complete useState hook @ErnestBrandi and I am having the exact same problem as @laurent512 . The second item of the return value (setState) is crucial if I want to re-use the data to manipulate it.

In e.g. a use-case of fetching data for a form, manipulating it and updating it again.

This i.e. does not work:

const FormComponent = () => {
    const { data, error } = useSWR('/questions')
    const [questions, setQuestions] = useState(data)
    return <div>{ JSON.stringify(questions) }</div> // always undefined. can't even start editing the form and do `setQuestion`
}

To alleviate this problem, useSWR should also expose a method to mutate the data (unlike the existing mutate method, which I would expect to do excatly that). Maybe setData?

[shuding]

mutate is designed for that exact use case, what do you think is missing from it?

[MartinMuzatko]

Hello @shuding!
I was getting it wrong 🙏.
I thought mutate would only allow me to refresh the source using the fetcher. After inspecting the documentation more closely, I found more details on how to overwrite the data here: https://swr.vercel.app/docs/mutation#mutation-and-post-request
I was a little irritated by the heading, since this is exactly what I would do for a PUT request also.

Thank you :)