​
Introduction

Although there are some components that can run queries automatically, you can also run them manually from your React app, and do whatever you want with the results.

​
Running queries

To run a query from your React app, you can use the provided useQuery function. This function has the following options:

​
Properties

​
queryPath
string
required
The path of the query you want to run.
​
params
object
The variables you want to pass to the query.
See the Queries section to learn more about the query configuration.

​
Returned attributes

​
data
QueryResult | null
The data returned by the query. Will be null if the query is still running or if there was an error.Check QueryResult to learn more about the data structure.
​
isFetching
boolean
A boolean that indicates if the query is still running.
​
error
Error
The error returned by the query. Will be null if there was no error.
​
compute
function
A function that allows you to run the query again.

​
Example

import { useQuery, Table } from '@latitude-data/react'

export default function Example() {
  const { data, isFetching, error, compute } = useQuery({
    queryPath: 'titles/titles-table'
  })

  return (
    <div className='p-4 flex flex-col gap-y-4'>
      <h1>React Example with Latitude</h1>
      <Button onClick={compute}>Refresh</Button>

      {isFetching && <p>Loading movies...</p>}
      {error && <p>There has been an error: {error.message}</p>}
      {data && (
        <div>
          <p>There are {data.rowCount} results:</p>
          <Table data={data} />
        </div>
      )}
    </div>
  );
}