import request from "graphql-request";
import { useQuery } from "@tanstack/react-query";
 
import { graphql } from "./gql/gql";
 
const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
  query allFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`);
 
function App() {
  // `data`가 완전히 입력되었습니다!
  const { data } = useQuery({
    queryKey: ["films"],
    queryFn: async () =>
      request(
        "https://swapi-graphql.netlify.app/.netlify/functions/index",
        allFilmsWithVariablesQueryDocument,
        // 변수 또한 타입 검사가 가능합니다!
        { first: 10 }
      ),
  });
  // ...
}