What are some ways to use SWR for mutating data specific to a certain ID?

I have scoured the internet for answers to no avail. It's baffling because I expected this issue to be quite common.

Take, for instance, the scenario where we need to retrieve a post with a specific id:

const { data } = useSWR(`/api/post/${id}`, fetcher)

Let's say we also have a form that allows us to edit the post. Upon mutating:

mutate(`/api/post/${id}`)

However, when attempting to force revalidation on a particular id, nothing seems to happen. How can this be resolved in the correct manner?

On another note, performing SWR fetching without an id like using /api/comments, which fetches all comments, seems to work flawlessly when executing mutate('/api/comments').

I hope my explanation is coherent. Essentially, what I aim to accomplish is making a POST request after updating a post with a specific id and seamlessly refreshing the page with the updated information.

It appears that mutate fails to recognize the key when the id value is dynamic.

typescriptaxiosnext.jsswr

Answer №1

To utilize the mutate function, simply import it from the hook and it will be associated with that specific key.

const { data, mutate } = useSWR(`/api/post/${id}`, fetcher)

Afterwards, you can easily execute the mutate() function.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is your Angular2 form page experiencing reloading issues?

I am currently incorporating Angular2 into my project. I am facing an issue where the page keeps refreshing, and I'm unable to determine the cause. Below is a snippet of my form: <form> <div class="form-group"> ...

javascripttypescriptangular2-forms

Does the method in the superclass "not exist" within this type....?

Our TS application utilizes a JavaScript library, for which we crafted a .d.ts file to integrate it with TypeScript. Initially, the file resided in a "typings" directory within the project and everything operated smoothly. Subsequently, we opted to relocat ...

javascripttypescriptinheritancetypescript-typings

What specific element is being targeted when a directive injects a ViewContainerRef?

What specific element is associated with a ViewContainerRef when injected into a directive? Take this scenario, where we have the following template: template `<div><span vcdirective></span></div>` Now, if the constructor for the ...

htmlangulartypescript

Developing React components with Typescript requires careful consideration when defining component props, especially when the component may be

Consider the following scenario: { this.props.userName && <UserProfile userName={this.props.userName} /> In the UserProfile component: interface UserProfileProps { userName: string; } class UserProfile extends React.Component<UserProfile ...

reactjstypescript

Setting up Storybook with Tailwindcss, ReactJS and Typescript: A comprehensive guide

What is the best way to configure Storybook to handle Tailwindcss styles and absolute paths? Just a heads up, this question and answer are self-documenting in line with this. It was quite the process to figure out, but I'm certain it will help others ...

reactjstypescripttailwind-cssstorybook

Is your Typescript struggling to infer types correctly?

I created a function that converts an Array into a Map: function toMap<T,TKey,TElement>(items: Array<T>, keySelector: (item: T) => TKey, elementSelector: (item: T) => TElement ): Map<TKey,TElement> { var ma ...

typescripttypescript1.8

Exploring Typescript's null chain and narrowing down types

Recently, I encountered a situation where typescript seems to be incorrectly narrowing the given type. (value: number[] | null) => { if ((value?.length ?? 0) > 0) value[0]; }; Even though the condition will not be true if the value is null, in th ...

typescripttype-narrowing

Angular 2 Login Component Featuring Customizable Templates

Currently, I have set up an AppModule with a variety of components, including the AppComponent which serves as the template component with the router-outlet directive. I am looking to create an AuthModule that includes its own template AuthComponent situa ...

htmlangulartypescriptangular2-routingangular2-template

Extract the data from a deeply nested key within a JSON object

I'm currently working on a function that takes a key (specified as a string) and retrieves its corresponding values from a given JSON object. Here is the JSON data I am working with: [ { "some_key1": [ {"key": "va ...

javascriptjsontypescriptalgorithm

Certain scss properties are not compatible with component-based styling in nextjs

When I try to use the CSS property shown below in my component styling file for NextJs, or if I import my main styles.scss file into any component.styles.scss file, I encounter the same error: input[type="date"] { display: block; /* Solution ...

reactjssassnext.js

Leveraging enums within strictFunctionTypes for Typescript generics

Here is a code snippet (TS playground link): const enum Enum { A, B, C } interface Args { e: Enum.A; } interface GenericClass<A> { new (args: A) : void; } class TestClass { constructor(args: Args) {} } function func<A>(C: GenericCl ...

functiontypescriptgenericsenums

Misplacing a cookie while trying to request it from one subdomain to another subdomain

Recently, I've been encountering a strange issue involving the disappearance of cookies. In the past, I utilized AWS for both my frontend and backend infrastructure. View previous setup Due to deployment complications (specifically prolonged fronte ...

expressnext.jscookieshttpsrequest

DxDataGrid: Implementing a comprehensive validation system for multiple edit fields

I'm currently working with a DxDataGrid within an Angular Application. Within this particular application, I have the need to input four dates. I've implemented validation rules that work well for each individual field. However, my challenge aris ...

javascriptangulartypescriptdevextremedevextreme-angular

The Mongoose model is having issues being imported into a different Component

Attempting to utilize my model for displaying and locating users in MongoDB has hit a snag. Upon importing it into profile.js and launching my app, an error is thrown: Cannot read properties of undefined (reading 'Users') https://i.stack.imgur.c ...

javascriptreactjsmongodbmongoosenext.js

The issue lies within typescript due to process.env.PORT being undefined

I am a newcomer to working with TypeScript. Even after importing and using the dotenv package, I am still encountering issues with getting undefined values. Do I need to declare an interface for the dotenv variables? import express,{Application} from &apo ...

node.jstypescriptexpressdotenv.env

employing the `useSWR` mutation with an `undefined` parameter does not trigger revalidation in

I am utilizing uswSWR for managing user authentication: export function useAuthenticatedUser() { const { data, error, isLoading, mutate } = useSWR("user", UserApi.getAuthenticatedUser, { shouldRetryOnError(err) { ...

reactjsnext.jsvercelswr

Struggling with displaying a PDF file from the local directory in a NextJS application

I've been facing trouble importing and displaying my resume, a local file, within a react component. The code import myResume from '../assets/pdfs/myResume.pdf' is resulting in the error: Error: Cannot find module '../assets/pdfs/myRes ...

javascriptreactjspdfwebpacknext.js

Guide on how to prevent click events when a checkbox is not selected in Angular 2

A click event is being used on a ul element with a checkbox below it. When the checkbox is checked, the list should be enabled and the click event should work. If the checkbox is unchecked, the list should be disabled and the click event should not work. ...

typescriptangular-uiangular7angular-template

MUI Gradient Tracked Button

Take a look at this Codepen example I created. It showcases a hover effect where the gradient follows the mouse cursor. In order to achieve this effect, I have defined two CSS variables - --x and --y, to keep track of the mouse position on the button. The ...

javascriptcssreactjstypescriptmaterial-ui

What is the reason for a class's attributes being considered undefined even after they have been previously set?

Within my code, there is a class called WorkspaceDatabase that stems from the Dynamic Tree Example. I have incorporated some debugging information to gain a clearer understanding of the issue at hand. The Issue: Upon entering the complete() function, an ...

angulartypescriptangular-material