Skip to content

Instantly share code, notes, and snippets.

@dabit3
Last active January 26, 2021 16:04
Show Gist options
  • Save dabit3/ee8f489ebc208502ab9351809e96e70d to your computer and use it in GitHub Desktop.
Save dabit3/ee8f489ebc208502ab9351809e96e70d to your computer and use it in GitHub Desktop.
Example of using custom React hooks for managing GraphQL subscriptions
import { useEffect, useState } from 'react'
import { API, graphqlOperation } from 'aws-amplify'
const ListTalks = `
query {
listTalks {
items {
name
description
presenter {
name
bio
}
}
}
}
`
const OnCreateTalk = `
subscription {
onCreateTalk {
id
name
description
presenter {
name
bio
}
}
}
`
export default () => {
const [talks, updateTalks] = useState([])
useEffect(async() => {
const talkData = await API.graphql(graphqlOperation(ListTalks))
updateTalks(talkData.data.listTalks.items)
}, [])
useEffect(() => {
const subscription = API.graphql(
graphqlOperation(OnCreateTalk)
).subscribe({
next: data => {
const { value: { data: { onCreateTalk } }} = data
const talkData = [...talks, onCreateTalk]
updateTalks(talkData)
}
})
return () => subscription.unsubscribe()
}, [talks])
return talks
}
@Scotthorn0
Copy link

@kristianmandrup Would you mind clarifying what you mean by "heavy lifting"?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment