fetchNui

The fetchNui event calls the client sided Lua code and expects return data of set type.

fetchNuiExample.tsx

import { fetchNui } from '@/utils/fetchNui';
import { useState } from 'react';
import { useEffect } from 'react';

interface NuiExampleData {
  users: User[];
}

interface User {
  name: string;
  age: number;
}

export const FetchNuiExample = () => {
  const [data, setData] = useState<NuiExampleData | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetchNui<NuiExampleData>(
          'exampleEvent',
          { key: 'value' },
          {
            data: {
              users: [
                { name: 'Alice', age: 30 },
                { name: 'Bob', age: 25 },
              ],
            },
            delay: 1000,
          }
        );
        setData(response);
      } catch (err) {
        console.error(`Error fetching NUI data: ${err}`);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Fetch NUI Example</h1>
      <div>
        {data ? (
          <ul>
            {data.users.map((user, index) => (
              <li key={index}>
                {user.name} - {user.age} years old
              </li>
            ))}
          </ul>
        ) : (
          <p>Loading...</p>
        )}
      </div>
    </div>
  );
};