​
Introduction

You can retrieve data from your Latitude project within your React application.

​
Installation

npm install @latitude-data/react

Once the React package is installed in your project, you need to place our Latitude data provider at the root of your app as shown below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { LatitudeProvider } from '@latitude-data/react';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <LatitudeProvider
      apiConfig={{ host: 'https://localhost:3000' }}
    >
      <Example />
    </LatitudeProvider>
  </React.StrictMode>,
);

Note that to connect your React app to your Latitude server, you must specify the server URL. Here, we assume a Latitude data project is running on https://localhost:3000.

​
Retrieve a Latitude Query

After installing the package, you will be able to fetch data from your Latitude data server using our useQuery hook. Below is an example showing how to execute a query named titles/titles-table. This query can be found in the Netflix example.

Notice how you can utilize the compute method to force a refresh of the query data.

You can see a fully working example in Examples folder

import { useQuery } from '@latitude-data/react';
import { useCallback } from 'react';

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

  const caption = isFetching ? 'Loading movies...' : 'List of movies';
  const refresh = useCallback(() => compute(), [compute]);

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

      <Table>
        {!isFetching ? <MovieList movies={movies!} /> : <MovieListSkeleton />}
        <TableCaption>{caption}</TableCaption>
      </Table>
    </div>
  );
}

​
Passing Parameters

If your query requires parameters, you can pass them to the query as follows:

const { data } = useQuery({
  queryPath: 'titles/titles-table',
  params: {
    type: 'movie',
  },
});
React Embedding