Is there a typescript example of useSWR

[thesobercoder]

Is there a typescript example of useSWR with proper types for data and error? I couldn't find one.

[Amnesie91]

i kinda do not understand where your problem is, when you hover over your imported useSwr Function, you see how you can give types for data and error? like this?

import useSWR from "swr";

export const useFeed = () => {
  const { data } = useSWR<YourDataType, YourErrorType>(
    "/api/feed",
    fetcher
  );

  return { data };
};

[simplenotezy]

Can you share some more code? E.g. how does YourDataType and YourErrorType look like? What about the fetcher function?

[simplenotezy]

Found: https://github.com/vercel/swr/blob/main/examples/basic-typescript/libs/fetch.ts

export default async function fetcher<JSON = any>(
  input: RequestInfo,
  init?: RequestInit
): Promise<JSON> {
  const res = await fetch(input, init)
  return res.json()
}

[promer94]

https://swr.vercel.app/docs/typescript

[CyberCyclone]

How does assuming the Error type help? E.g, YourErrorType will throw an error as it's not the correct data type that is being used. The error response by default returns any as it's TS type, which is bad practice. So this answer only covers the data type, not the error type.

[samuliasmala]

You need to specify the error type as the second generic parameter to useSWR. If your fetcher throws a standard error then the type can be just Error. Please find below my useGraphql hook which I use to make GraphQL requests using swr:

// useGraphql.ts
import useSWR, { SWRResponse, Fetcher } from 'swr';

export function useGraphql<Data>(key: string): SWRResponse<Data, Error> {
  const fetcher: Fetcher<Data, typeof key> = async (query) => {
    const res = await fetch('/api/graphql', {
      method: 'POST',
      headers: { 'Content-type': 'application/json' },
      body: JSON.stringify({ query }),
    });
    if (!res.ok) throw new Error('An error occurred while fetching the data.');

    const json = (await res.json()) as { data: Data };
    return json.data;
  };

  return useSWR<Data, Error>(key, fetcher);
}

[jorgegarba]

This is a resume based on the answers (Thank you so much by the way).

The fetcher function in a separate file(in order to reuse it) as follows:

export default async function fetcher<JSON = any>(
  input: RequestInfo,
  init?: RequestInit
): Promise<JSON> {
  const res = await fetch(input, init);
  return res.json();
}

The use data function as follows:

export function MyComponent() {
  const { data, error } = useSWR<BuildingObj, Error>('/api/v3/public/building', fetcher);
  // Do your business here
}

BuildingObj is the type of success response and it will be stored in the data variable.
Error is the type of error response in other cases

I guess this is the most basic way but it works =')
Thank you @simplenotezy and @Amnesie91

[fywk]

I've used this fetcher function before without error but typescript now shows this:

Type 'unknown' is not assignable to type 'JSON'.
  'JSON' could be instantiated with an arbitrary type which could be unrelated to 'unknown'.

[jorgegarba]

@fywk
Oh gosh, IDK if it is happening because of your linter or something like that because I have in my case the following files:

httpClient.ts

export default async function fetcher<JSON = any>(
  input: RequestInfo,
  init?: RequestInit
): Promise<JSON> {
  const res = await fetch(input, init);
  return res.json();
}

building.ts => I've created this file in order to reuse it anywhere

import fetcher from '@/httpClient';
import { BACK_URL } from '@/constants';
import useSWR from 'swr';
import { BuildingsResponse, CommonResponse } from '@/types/responses';

export function useBuildings() {
  const url = `${BACK_URL}/api/v2/public/building`;
  const { data, error, isValidating, isLoading } = useSWR<
    CommonResponse<BuildingsResponse[]>
  >(url, fetcher);

  return {
    loadingBuildings: isValidating || isLoading,
    data: data?.content,
    error,
  };
}

MyComponent.tsx

 // ...importing stuff above
const QuotePage = () => {
  const [activeStep, setActiveStep] = useState<number>(0);
  const { data: buildingList, loadingBuildings } = useBuildings();
  console.log('data', buildingList);
// it is not annoyed

or you can use any to specify the error? but it should work :/

[fywk]

I've added type assertion and typescript is happy with this now:

export default async function fetcher<JSON = any>(
  input: RequestInfo,
  init?: RequestInit
): Promise<JSON> {
  const res = await fetch(input, init);
  return res.json() as Promise<JSON>;
}

[jorgegarba]

As it is not a good practice, if it worked, I'm happy for you!

[sskycn]

export const httpGet = async <T>(input: RequestInfo | URL): Promise<T> => {

    const accessToken = getAccessToken();

    if (!accessToken) {
        throw Error("accessToken required")
    }

    const init: RequestInit = {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
            "Authorization": `Bearer ${accessToken}`
        }
    }

    const res = await fetch(input, init);
    return await res.json();
}

it works.

[vassbence]

Here is how I usually do it in a Next.js project's _app.tsx:

import type { AppProps } from "next/app";

async function fetcher(...args: Parameters<typeof fetch>) {
  return (await fetch(...args)).json();
}

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SWRConfig value={{ fetcher }}>
        ...
    </SWRConfig>
  );
}