react-query#QueryObserver JavaScript Examples

The following examples show how to use react-query#QueryObserver. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Node.js    From tako with MIT License 5 votes vote down vote up 
Node = ({ type, name, path, parentCommitmessage, level }) => {
  const { user, repo, branch } = useStore(state => state.repoDetails)
  const isExpanded = useStore(state => state.expandedNodes[path] === true)
  const toggleExpandNode = useStore(state => state.toggleExpandNode)
  const selectedFilePath = useStore(state => state.selectedFilePath)
  const setSelectedFilePath = useStore(state => state.setSelectedFilePath)
  const hasNoSelectedFilePath = selectedFilePath === null

  const isSelected = path === selectedFilePath
  const isFolder = type === 'dir'

  const childListingObserver = React.useMemo(
    () =>
      new QueryObserver(queryClient, {
        queryKey: ['listing', { user, repo, branch, path }],
        enabled: isExpanded,
      }),
    [branch, isExpanded, path, repo, user]
  )

  const isLoadingContents = useObserver(
    childListingObserver,
    ({ isLoading }) => isLoading
  )

  let typeIcon = isFolder ? (
    <FolderIcon
      style={{
        color: 'var(--color-files-explorer-icon)',
        position: 'relative',
        top: 1,
      }}
    />
  ) : (
    <FileIcon
      style={{
        color: 'var(--color-text-tertiary)',
        position: 'relative',
        top: 1,
      }}
    />
  )
  typeIcon =
    isLoadingContents && isExpanded ? (
      <Spinner size="16px" color="var(--color-files-explorer-icon)" />
    ) : (
      typeIcon
    )

  const ExpandoIcon = isFolder ? ChevronIcon : 'div'

  const [isHovering, hoverProps] = useHover()

  const { data: lastCommitData } = useQuery(
    ['last-commit', { user, repo, branch, path }],
    getLastCommitForNode,
    { enabled: hasNoSelectedFilePath }
  )

  React.useEffect(() => {
    if (isHovering) {
      if (isFolder) {
        queryClient
          .prefetchQuery(
            ['listing', { user, repo, branch, path }],
            markAsPrefetch(getNode)
          )
          .then((items = []) => {
            items.forEach(({ path }) =>
              queryClient.prefetchQuery(
                ['last-commit', { user, repo, branch, path }],
                markAsPrefetch(getLastCommitForNode),
                { enabled: hasNoSelectedFilePath }
              )
            )
          })
      } else {
        const fileExtension = path.split('.').slice(-1)[0].toLowerCase()

        if (fileExtension === 'md') {
          queryClient
            .prefetchQuery(
              ['file', { user, repo, branch, path }],
              markAsPrefetch(getFileContent)
            )
            .then(text => {
              queryClient.prefetchQuery(
                ['markdown', { user, repo, text }],
                getMarkdown,
                { enabled: text }
              )
            })
        } else {
          queryClient.prefetchQuery(
            ['file', { user, repo, branch, path }],
            markAsPrefetch(getFileContent)
          )
        }
      }
    }
  }, [isHovering, branch, isFolder, path, repo, user])

  return (
    <Fragment>
      <Row highlighted={isSelected}>
        <Cell
          {...hoverProps}
          onClick={event => {
            event.stopPropagation()
            if (isFolder) {
              toggleExpandNode(path)
            } else {
              setSelectedFilePath(path)
            }
          }}
          style={{
            paddingLeft: INDENT_SIZE * level + 10,
            display: 'grid',
            gridTemplateColumns: '16px 26px 1fr',
            alignItems: 'center',
          }}
        >
          <ExpandoIcon
            style={{
              color: 'var(--color-files-explorer-icon)',
              position: 'relative',
              left: isExpanded ? -4 : -3,
              transform: isExpanded ? 'rotate(180deg)' : 'rotate(90deg)',
            }}
          />

          {typeIcon}

          <Truncateable
            css={{
              marginLeft: 5,
              overflow: selectedFilePath && 'visible',
            }}
          >
            <a
              title={name}
              className="link-gray-dark"
              href={`https://github.com/${user}/${repo}/blob/${branch}/${path}`}
              onClick={maybeHijackClick}
            >
              {name}
            </a>
          </Truncateable>
        </Cell>

        {!selectedFilePath &&
          (lastCommitData ? (
            <Fragment>
              <Cell>
                <Truncateable>
                  <a className="link-gray" href={lastCommitData.url}>
                    {lastCommitData.message}
                  </a>
                </Truncateable>
              </Cell>

              <Cell alignRight style={{ color: 'var(--color-text-tertiary)' }}>
                <Truncateable>{lastCommitData.date}</Truncateable>
              </Cell>
            </Fragment>
          ) : (
            <Fragment>
              <Cell>
                <Truncateable>
                  <Placeholder
                    text={parentCommitmessage || 'did the foobar with the qux'}
                  />
                </Truncateable>
              </Cell>

              <Cell alignRight>
                <Truncateable>
                  <Placeholder text="2 days ago" />
                </Truncateable>
              </Cell>
            </Fragment>
          ))}
      </Row>

      {isExpanded && (
        <Listing
          path={path}
          level={level + 1}
          parentCommitmessage={lastCommitData && lastCommitData.message}
        />
      )}
    </Fragment>
  )
}