-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
App.tsx
51 lines (44 loc) · 1.27 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { useEffect, useState } from 'react';
import { buildHTTPExecutor } from '@graphql-tools/executor-http';
import './App.css';
import Film from './Film';
import { graphql, DocumentType } from './gql';
const executor = buildHTTPExecutor({
endpoint: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
});
const AllFilmsWithVariablesQuery = graphql(/* GraphQL */ `
query allFilmsWithVariablesQuery($first: Int!) {
allFilms(first: $first) {
edges {
node {
...FilmItem
}
}
}
}
`);
// we could also define a client:
// `const client = new GraphQLClient('https://swapi-graphql.netlify.app/.netlify/functions/index')`
// and use:
// `client.request(allFilmsWithVariablesQueryDocument, { first: 10 })`
function App() {
const [data, setData] = useState<DocumentType<typeof AllFilmsWithVariablesQuery>>();
useEffect(() => {
executor({
document: AllFilmsWithVariablesQuery,
variables: {
first: 10,
},
}).then(result => {
if ('data' in result) {
setData(result.data!);
}
});
}, []);
return (
<div className="App">
{data && <ul>{data.allFilms?.edges?.map((e, i) => e?.node && <Film film={e?.node} key={`film-${i}`} />)}</ul>}
</div>
);
}
export default App;