runQuery()

import React from "react"
import {runQuery, TextBlock, useAsyncCache} from "attio/client"
import getPersonName from "./get-person-name.graphql"
import getCurrentUser from "./get-current-user.graphql"

export function MeetPerson({recordId}: {recordId: string}) {
  // Will run in parallel and suspend until both queries have returned
  const {values} = useAsyncCache({
    currentUserResult: async () => await runQuery(getCurrentUser),
    personResult: async () => await runQuery(getPersonName, {recordId}),
  })
  const currentUserName: string = values.currentUserResult.currentUser.name
  const personName: string | null | undefined = values.personResult.person?.name?.full_name

  return (
    <TextBlock>
      {personName ?? "Unknown"} would like to meet with {currentUserName}.
    </TextBlock>
  )
}

query getCurrentUser {
  currentUser {
    name
  }
}

query getPersonName($recordId: String!) {
  person(id: $recordId) {
    name {
      full_name
    }
  }
}