Skip to content

Instantly share code, notes, and snippets.

@SimeonGriggs

SimeonGriggs/useListeningQuery.ts

Last active November 30, 2022 05:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SimeonGriggs/ee7a3fb212625bf39d210f311642eb7e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SimeonGriggs/ee7a3fb212625bf39d210f311642eb7e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. SimeonGriggs renamed this gist May 13, 2022. 1 changed file with 0 additions and 0 deletions.
    0 useListeningQuery.tsx → useListeningQuery.ts
    View file
    File renamed without changes.
  2. SimeonGriggs revised this gist May 12, 2022. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions useListeningQuery.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -20,10 +20,13 @@ type Observable = {
    unsubscribe: () => void
    }

    const DEFAULT_PARAMS = {}
    const DEFAULT_OPTIONS = {apiVersion: `v2022-05-09`}

    export default function useListeningQuery(
    query: string,
    params: Params = {},
    options: ListenQueryOptions = {apiVersion: `v2022-05-09`}
    params: Params = DEFAULT_PARAMS,
    options: ListenQueryOptions = DEFAULT_OPTIONS
    ): ReturnShape {
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState(false)
    @@ -46,10 +49,7 @@ export default function useListeningQuery(
    })
    )
    .subscribe((documents) => {
    // Prevent re-renders from subscription returning the same data
    if (!isEqual(data, documents)) {
    setData(documents)
    }
    setData((current) => (isEqual(current, documents) ? current : documents))
    setLoading(false)
    setError(false)
    })
  3. SimeonGriggs revised this gist May 9, 2022. 1 changed file with 33 additions and 9 deletions.
    42 changes: 33 additions & 9 deletions useListeningQuery.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,40 +1,64 @@
    import React, {useEffect, useState, useRef} from 'react'
    import documentStore from 'part:@sanity/base/datastore/document'
    import {catchError} from 'rxjs/operators'
    import {catchError, distinctUntilChanged} from 'rxjs/operators'
    import isEqual from 'react-fast-compare'

    type Params = Record<string, string | number | boolean | string[]>

    interface ListenQueryOptions {
    tag?: string
    apiVersion?: string
    }

    type ReturnShape = {
    loading: boolean
    error: boolean
    data: any
    }

    export default function useListeningQuery(query: string, queryParams: any) {
    type Observable = {
    unsubscribe: () => void
    }

    export default function useListeningQuery(
    query: string,
    params: Params = {},
    options: ListenQueryOptions = {apiVersion: `v2022-05-09`}
    ): ReturnShape {
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState(false)
    const [data, setData] = useState(null)
    const subscription = useRef(null)
    const subscription = useRef<null | Observable>(null)

    useEffect(() => {
    if (query) {
    subscription.current = documentStore
    .listenQuery(query, queryParams ?? {}, {apiVersion: `v2022-05-09`})
    .listenQuery(query, params, options)
    .pipe(
    distinctUntilChanged(isEqual),
    catchError((err) => {
    console.error(err)
    setError(err)
    setLoading(false)
    setData(null)

    return err
    })
    )
    .subscribe((documents) => {
    setData(documents)
    // Prevent re-renders from subscription returning the same data
    if (!isEqual(data, documents)) {
    setData(documents)
    }
    setLoading(false)
    setError(false)
    })
    }

    return () => (subscription.current?.unsubscribe ? subscription.current.unsubscribe() : null)
    }, [query, queryParams])

    return {loading, error, data} as ReturnShape
    return () => {
    return subscription.current ? subscription.current.unsubscribe() : undefined
    }
    }, [query, params, options])

    return {loading, error, data}
    }
  4. SimeonGriggs revised this gist May 9, 2022. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions useListeningQuery.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -31,9 +31,9 @@ export default function useListeningQuery(query: string, queryParams: any) {
    setLoading(false)
    setError(false)
    })

    return () => (subscription.current?.unsubscribe ? subscription.current.unsubscribe() : null)
    }

    return () => (subscription.current?.unsubscribe ? subscription.current.unsubscribe() : null)
    }, [query, queryParams])

    return {loading, error, data} as ReturnShape
  5. SimeonGriggs created this gist May 9, 2022.
    40 changes: 40 additions & 0 deletions useListeningQuery.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    import React, {useEffect, useState, useRef} from 'react'
    import documentStore from 'part:@sanity/base/datastore/document'
    import {catchError} from 'rxjs/operators'

    type ReturnShape = {
    loading: boolean
    error: boolean
    data: any
    }

    export default function useListeningQuery(query: string, queryParams: any) {
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState(false)
    const [data, setData] = useState(null)
    const subscription = useRef(null)

    useEffect(() => {
    if (query) {
    subscription.current = documentStore
    .listenQuery(query, queryParams ?? {}, {apiVersion: `v2022-05-09`})
    .pipe(
    catchError((err) => {
    console.error(err)
    setError(err)
    setLoading(false)
    setData(null)
    })
    )
    .subscribe((documents) => {
    setData(documents)
    setLoading(false)
    setError(false)
    })

    return () => (subscription.current?.unsubscribe ? subscription.current.unsubscribe() : null)
    }
    }, [query, queryParams])

    return {loading, error, data} as ReturnShape
    }