1
import request from 'graphql-request'
2
import { useQuery } from '@tanstack/react-query'
3

4
import { graphql } from './gql/gql'
5

6
const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
7
  query allFilmsWithVariablesQuery($first: Int!) {
8
    allFilms(first: $first) {
9
      edges {
10
        node {
11
          id
12
          title
13
        }
14
      }
15
    }
16
  }
17
`)
18

19
function App() {
20
  // `data` is fully typed!
21
  const { data } = useQuery({
22
    queryKey: ['films'],
23
    queryFn: async () =>
24
      request(
25
        'https://swapi-graphql.netlify.app/.netlify/functions/index',
26
        allFilmsWithVariablesQueryDocument,
27
        // variables are type-checked too!
28
        { first: 10 },
29
      ),
30
  })
31
  // ...
32
}