How can I integrate SWR with TypeScript in my project?

How can I integrate SWR with TypeScript in my project?

To integrate SWR with TypeScript, you need to install SWR and set up your API calls with type definitions.

What are the basic types I should define for my API response?

You should define an interface that represents the structure of your API response. For example, if your API returns a user object, you might define a User interface.

Can you show me an example of how to fetch data using SWR with TypeScript?

Sure! Here's a simple example:

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then(res => res.json());

function App() {
  const { data, error } = useSWR<User[]>('/api/users', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{data.map(user => <div key={user.id}>{user.name}</div>)}</div>;
}

What if my API response has optional fields?

You can use TypeScript's optional properties by adding a question mark to the field in your interface. For example:

interface User {
  id: number;
  name: string;
  email?: string; // optional field
}