​
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>
  );
}
Embedding ViewsQueryResult