Is it possible to set a base type in SWR using TypeScript?

[Red-Killer]

I want to ensure that when using useSWR in Next.js, the returned data always contains two specific fields:

• success: boolean
• message?: string

This should be the default behavior, without the need to explicitly define useSWR<BaseResponse>("/somepath") every time. Additionally, it should be extendable if another type is passed.

For example:

const { data } = useSWR("/somepath")

The data would have the following structure by default:

{
  success: boolean;
  message?: string;
}

However, when you extend with another type, like this:

const { data } = useSWR<SomeOtherType>("/somepath")

The resulting data type would look like:

{
  success: boolean;
  message?: string;
  username: string;  // Added because of SomeOtherType
}

Is something like that possible?

[akteigland]

You can wrap useSWR and then import that where needed:

import useSWR, { SWRResponse } from "swr";

interface DefaultResponse {
    success: boolean;
    message?: string;
}

export const useMySWR = <T>(key: string): SWRResponse<DefaultResponse & T> => useSWR(key);

in your component:

const { data } = useMySWR<SomeOtherType>("/somepath")

[akteigland]

To be clear, this is telling typescript that the data will always look like DefaultResponse, but you'd need to enforce that typing in the APIs or fetcher - none of the above actually checks that the data fits that type.