generated from sikleber/aws-cdk-react-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
GraphqlApiButton.tsx
37 lines (32 loc) · 1013 Bytes
/
GraphqlApiButton.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
import React, { ReactElement, useEffect } from 'react'
import './Main.css'
import { useLazyQuery } from '@apollo/client'
import { GET_HELLO } from '../graphql/queries'
interface GraphqlApiButtonProps {
updateMessage: (message: string) => void
}
const GraphqlApiButton: React.FunctionComponent<GraphqlApiButtonProps> = ({
updateMessage
}): ReactElement => {
// loading and fetchPolicy are only needed to actually execute and react on second button click
const [getHello, { error, data, loading }] = useLazyQuery(GET_HELLO, {
fetchPolicy: 'network-only'
})
useEffect(() => {
if (!loading) {
if (error) {
console.error(error)
updateMessage('Failed to call the GraphQL API')
} else if (data) {
console.log(data)
updateMessage(data.getHello)
}
}
}, [error, data, loading, updateMessage])
return (
<button className='api-button' onClick={() => getHello()}>
Call GraphQL API
</button>
)
}
export default GraphqlApiButton