SupabaseS
Supabase•2y ago
Johnny Robert

Help Fetching All Countries from my Table

Hello, I have a table with lots of locations ( a few millions).

During the Account Creation process in my app, one of the steps involves choosing your Country. I have a dropdown button which is supposed to contain all the different countries that we support.

Since each country appears multiple times in my table, the client code needs to ignore any duplicates and only return the unique country results.

However the issue is that __my code only picks only one country. __

And also is this the proper way to do fetch the data (if a large number of users sign up at the same time) ?

Thank you.

import React, { useEffect, useState, ChangeEventHandler } from 'react';
import { createClient } from '../../utils/supabase/client';

type PersonalInformationData = {
    firstName: string;
    lastName: string;
    country: string;
    dateOfBirth: string;
};


type PersonalInformationProps = {
    data: PersonalInformationData;
    handleChange: ChangeEventHandler<HTMLInputElement | HTMLSelectElement>;
};

interface CountryData {
    countryName: string;
  }
  
const PersonalInformation: React.FC<PersonalInformationProps> = ({ data, handleChange }) => {
    const [countries, setCountries] = useState<string[]>([]);
    const supabase = createClient();

    useEffect(() => {
        const fetchCountries = async () => {
            const { data: countriesData, error } = await supabase
                .from('World Locations')
                .select('countryName');
    
            if (error) {
                console.error('Error fetching countries:', error);
                return;
            }
    
            if (countriesData) {
               
                const typedCountriesData = countriesData as CountryData[]; 
                const distinctCountries = Array.from(new Set(typedCountriesData.map(country => country.countryName)));
                setCountries(distinctCountries);
            }
        };
    
        fetchCountries();
    }, [supabase]);
Was this page helpful?