subscription.js

  const [suggestions, setSuggestions] = useState([])
  useEffect(() => {
    const query = `*[_type == "suggestion"] {
      content, _id, category,
      author->{"avatarUrl": image.asset->url, name, _id},
      likes[]->{_id, image{..., asset->}},
      comments, replied
    }`
    const subscription = API.listen(query, {}, {events: ['welcome', 'mutation']})
      .subscribe(item => {
        if (item.type === 'welcome') {
          API.fetch(query).then(setSuggestions)
        } else if (item.type === 'mutation') {
          setSuggestions(s => {
            const index = s.findIndex(i => i._id === item.result._id)
            return [
              ...s.slice(0, index),
              item.result,
              ...s.slice(index+1, s.length)
            ]
          })
        }
      })
    return (() => subscription.unsubscribe())
  }, [])