types: fix some mutation type issue

[promer94]

Trigger function should enforce arg type if arg type decleared in fetcher

close #2418

Previously

const { trigger } = useSWRMutation('key', (_, opts: { arg: { foo: string } }) => 'any'))
// will not throw error
trigger()

Now

const { trigger } = useSWRMutation('key', (_, opts: { arg: { foo: string } }) => 'any'))
// will throw error now
trigger()

Swr mutate type should work with trigger

close #2406 #2280

Previously

const { mutate } = useSWR("/some/key", fetcher);
  const { trigger } = useSWRMutation("/some/key", fetcher);

  return (
    <button
      onClick={async () => {
        mutate(trigger(), { // <-  Argument of type 'Promise<{ foo: string; } | undefined>' is not assignable to parameter of type '{ foo: string; } | Promise<{ foo: string; }> | MutatorCallback<{ foo: string; }> | undefined'. ...
          optimisticData: {
            foo: 'baz'
          }
        })
      }}
    />
  );

Now

const { mutate } = useSWR("/some/key", fetcher);
  const { trigger } = useSWRMutation("/some/key", fetcher);

  return (
    <button
      onClick={async () => {
        // it works now
        mutate(trigger(), {
            foo: 'baz'
          }
        })
      }}
    />
  );

Shoud be able to configure the type of optimisticData and populateCache

Previous

const { data } = useSWR('key', async () => {
    return ['foo']
})
const { trigger } = useSWRMutation(
    'key',
    async (_, { arg }: { arg: 'foo' }) => {
       return arg.toUpperCase()
    }
)

trigger('bar', {
      optimisticData: current => {
         // current should be inferred as string[] | undefined since it is from the cache, but it is actullay inferred as string to match the return type of fetcher
        // and it also should return string[] to match the cache type
      },
      populateCache: (added, current) => {
         // current should be inferred as string since it is from the cache, but it is actullay inferred as string to match the return type of fetcher
        // and it also should return string[] to match the cache type 
      },
      revalidate: false
    })

Now

const { data } = useSWR('key', async () => {
    return ['foo']
})
const { trigger } = useSWRMutation(
    'key',
    async (_, { arg }: { arg: 'foo' }) => {
       return arg.toUpperCase()
    }
)

trigger<typeof data>('bar', {
      optimisticData: current => {
         // current can be configued by generic now
      },
      populateCache: (added, current) => {
         // current can be configued by generic now
      },
      revalidate: false
    })

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b4df51d:

Sandbox	Source
SWR-Basic	Configuration
SWR-States	Configuration
SWR-Infinite	Configuration
SWR-SSR	Configuration

[osrl]

Hi, This PR broke my build:

Previously

export function useCreateCreditCard(
  config?: SWRMutationConfiguration<boolean, any>
) {
  const client = useApi();

  const fetcher: MutationFetcher<boolean> = async () => {
    const response = await client.createCreditCard();

    return !!response;
  };

  return useSWRMutation(['api', 'credit-card'], fetcher, config);
}

I can't call trigger(). (Expected 1-2 arguments, but got 0)

Now I have to do this:

export function useCreateCreditCard(
  config?: SWRMutationConfiguration<boolean, any, never>
) {
  const client = useApi();

  const fetcher: MutationFetcher<boolean, never> = async () => {
    const response = await client.createCreditCard();

    return !!response;
  };

  return useSWRMutation(['api', 'credit-card'], fetcher, config);
}

Did I used it wrong before?

[promer94]

For most time you don't need MutationFetcher. This just works

export function useCreateCreditCard(
  config?: SWRMutationConfiguration<boolean, any, never>
) {
  const client = useApi();
  const fetcher = async () => {
    const response = await client.createCreditCard();
    return !!response;
  };

  return useSWRMutation(['api', 'credit-card'], fetcher, config);
}