Tags

This package contains functions for retrieving tags from the public api.

fetchTags

Tags are requested from the public api. With no arguments passed in, the first 100 team tags are returned in an object containing the data (tags) and metadata associated with the request. Passing in a list of ids, a page number, amount per page, or a search string will modify the results returned.

import { fetchTags } from '@shared/tags'

async function workWithTags() {
  const tags = await fetchTags({
    perPage: 30 /** The per page count must be a number from 1 to 100. */,
  })

  console.log(tags.data)
}

Fetch Tags Params

The current supported params are as follows:

interface TagQueryParams {
  search?: string
  page?: number
  ids?: number[]
  pageParam?: number
  perPage?: number
  includeMetadata?: boolean
}

Additional params can be added to this package when needed. The available params are listed here.

The current default for tags per_page has been modified from 25 to 100, and the default for include_paging_counts has been modified from false to true.

Fetch Tags Response

The Tag interface defines a tag as

interface Tag {
  id: number
  name: string
}

The response for the request returns data and metadata (if includeMetadata property has not been set to false). More information about the request and response formats can be found here. The data will be an array of tags, in the format defined above. The metadata will return information about filtering, paging, and sorting. Additional information about metadata can be found here.

Fetching Tags with React Query

import { useQuery } from '@tanstack/react-query'
import { fetchTags, Tag } from '@shared/tags'

function TagsList({ ids }) {
  const { data } = useQuery<Tag[]>(
    ['app.cadences.tags', ids],
    async () => {
      const tags = await fetchTags({ ids })
      return tags?.data || []
    },
    {
      enabled: !!ids?.length,
    }
  )

  // ...

  return (
    <ul>
      {data.map((datum) => (
        <li key={datum.id}>{datum.name}</li>
      ))}
    </ul>
  )
}

Fetching Tags with React Query useInfiniteQuery hook

import { useInfiniteQuery } from '@tanstack/react-query'
import { Select } from '@design-system/inputs'
import { fetchTags } from '@shared/tags'

export const useInfiniteTags = (search?: string) =>
  useInfiniteQuery(
    ['shared.tags', search],
    ({ pageParam }) => fetchTags({ search, pageParam }),
    {
      getNextPageParam: (lastPage) => {
        const nextPage = lastPage?.metadata.paging?.next_page
        return nextPage
      },
    }
  )

function TagsFilter() {
  const [search, setSearch] = useState('')

  const { data, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage } =
    useInfiniteTags(search)

  const items = data
    ? data.pages?.flatMap((page) => page?.data).filter(isSelected)
    : []

  const onScrollFinish = () => {
    if (hasNextPage && !isFetchingNextPage) {
      fetchNextPage()
    }
  }

  // ...

  return (
    <Select
      list={items}
      onInputValueChange={setSearch}
      onScrollFinish={onScrollFinish}
      dropdownFooterElement={() => <span>Loading more...</span>}
      loading={isFetching || isFetchingNextPage}
    />
  )
}