#awddwa

1 messages · Page 1 of 1 (latest)

shell hemlock
#

const { data, error } = useSWR('/api/data', fetcher)

how to make this update with new data if i fx updated data from another component that isnt related to the component that gets the data

lyric shoreBOT
#

Hi @shell hemlock. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To update the data fetched by useSWR from another unrelated component, you can use the mutate function provided by SWR. The mutate function allows you to revalidate and update the data at a given key.

Here's a basic example:

import useSWR, { mutate } from 'swr'

// In your data fetching component
export function Page() {
 const { data, error } = useSWR('/api/data', fetcher)
 // ...
}

// In your unrelated component
export function AnotherComponent() {
  const updateData = async () => {
    // Update your data here...
    // After updating, call mutate to revalidate the data at '/api/data'
    mutate('/api/data')
  }

  return (
    <button onClick={updateData}>Update Data</button>
  )
}

In this example, when the updateData function is called in AnotherComponent, it will trigger a revalidation of the data at the key '/api/data'. This will cause the useSWR hook in Page to fetch the data again, updating it with the new data.

Please note that this is a simplified example and you might need to adjust it according to your specific use case.

For more information, you can refer to the SWR documentation (https://swr.vercel.app/).

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@shell hemlock kapa.ai is still learning and improving, please let us know how it did by reacting below

shell hemlock
#

mutate(
'/api/lists',
[
{
id: 'wad',
userId: 'string',
name: 'string',
order: 132132,
},
],
false,
);

@lyric shore that dont work it does not rerender another component with same exact key

lyric shoreBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The mutate function from SWR should trigger a re-render of any component that uses the same key with useSWR. However, there are a few things you might want to check:

  1. Make sure that the key you're using in mutate and useSWR is exactly the same. In your case, it should be '/api/lists'.

  2. The mutate function you're using is setting the data directly and not revalidating. The third parameter you're passing to mutate is false, which means it won't re-fetch the data, but just update the local version. If you want to re-fetch the data after mutating, you should pass true as the third parameter.

Here's an example:

mutate(
  '/api/lists',
  [
    {
      id: 'wad',
      userId: 'string',
      name: 'string',
      order: 132132,
    },
  ],
  true,
);
  1. If you're still having issues, it might be helpful to check if there are any errors being thrown in your components. You can do this by using the error return value from useSWR.
const { data, error } = useSWR('/api/lists', fetcher)

if (error) {
  console.error(error)
}

If none of these suggestions help, it might be a good idea to create a minimal reproduction of your issue and ask for help in the SWR GitHub Discussions (https://github.com/vercel/swr/discussions) or Next.js GitHub Discussions (https://github.com/vercel/next.js/discussions).

#

@shell hemlock kapa.ai is still learning and improving, please let us know how it did by reacting below

shell hemlock
#

@lyric shore mutate(
'/api/lists'
);

this dont trigger refetch in another component with exact same key

lyric shoreBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The mutate function from SWR should trigger a revalidation (refetch) of the data at the provided key in all components that use the same key with useSWR. If it's not working as expected, there could be a few reasons:

  1. Check the key: Ensure that the key you're using in mutate and useSWR is exactly the same. In your case, it should be '/api/lists'.

  2. Check for errors: Use the error return value from useSWR to check if there are any errors being thrown in your components.

const { data, error } = useSWR('/api/lists', fetcher)

if (error) {
  console.error(error)
}
  1. Check your SWR configuration: If you have a custom SWR configuration, make sure it's not interfering with the revalidation process.

If none of these suggestions help, it might be a good idea to create a minimal reproduction of your issue and ask for help in the SWR GitHub Discussions (https://github.com/vercel/swr/discussions) or Next.js GitHub Discussions (https://github.com/vercel/next.js/discussions).

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: