How to type-check SWR key and variables?

[michaelmerrill]

I'm wondering if I can improve the type-checking on the following code?

import type { NextPage } from 'next';
import useSWR from 'swr';
import request from 'graphql-request';

import { graphql } from '../gql/gql';

import styles from '../styles/Home.module.css';
import Film from '../components/Film';

const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
  query allFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          ...FilmItem
        }
      }
    }
  }
`);

const Home: NextPage = () => {
  const { data } = useSWR(
    ['allFilmsWithVariablesQuery', { bob: "this_should_error" }], // how do I get the second arg checked by TS? It should know the variables needed for allFilmsWithVariablesQuery.
    async ([_key, variables]: [string, any]) => request('https://swapi-graphql.netlify.app/.netlify/functions/index', document, variables) // also TS checked here.
  );

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        {data && <ul>{data.allFilms?.edges?.map((e, i) => e?.node && <Film film={e?.node} key={`film-${i}`} />)}</ul>}
      </main>
    </div>
  );
};

export default Home;