Async function in cell?

Get Help and Help Others
1

Hi there,

what do i have to do to use any async function in a cell?

i have a query (wich is async anyways) but i also have another function wich is async.
how can i make the cell await the query and the async function, and ideally show the loading part when either the query or the async function are still running?

this would be a pseudo example (with async in front of the Success, which does not work of course)

export const QUERY = gql`
  query FindSomethingbyID($id: String!) {
    asdf: asdf(id: $asdfId) {
      id
      type
    }
  }
`
export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ error }: CellFailureProps) => (
  <div style={{ color: 'red' }}>Error: {error?.message}</div>
)

export const Success = ({
source
}: CellSuccessProps<FindSomethingbyID>) => {
  const longrunningtask = async () => {}
  await longrunningtask()

  return <>success</>;
};

any help would be great!

Thanks a lot!

2

Never mind. its normal react…
i do it somewhat like this now:


  useEffect(() => {
    const fetchData = async () => {
        setIsFetching(true)
        // do some voodoo
          setIsFetching(false)
      }
    }
    fetchData()
  }, [data])

  return (
    <>
      {isFetching ? (
        <Loading />
      ) : (
        <>
      //  ...data..
        </>
      )}
    </>
  )
}