2

I am using two @apollo/react-hooks's useQuery hooks for querying my db but I noticed when printing them out to console ones data was undefined. I tried numerous things and couldn't fix it. I then tried switching the order of the hooks and noticed the hook that is first in order always returns the correct data.

I've verified the queries are correct in my playground and due to the fact that they both work but only the first one does.

const { loading: loadingFeaturedStores, error: errorFeaturedStore, data: featuredStoreData } = useQuery(GET_FEATURED_STORES);

const { loading: loadingStores, error: errorStore, data: normalStoreData } = useQuery(GET_STORES);

const renderStores = ({ type }: { type: string }): StoreCard | string => {
    const loading = type === 'featured' ? loadingFeaturedStores : loadingStores;
    const error = type === 'featured' ? errorFeaturedStore : errorStore;
    if (!loading) {
        return 'Loading...';
    }
    if (error) {
        return `Error: ${error.message}`;
    }
    const stores = type === 'featured' ? featuredStoreData.stores : normalStoreData.stores;
    const title = type === 'featured' ? 'Featured' : '';
    console.log(JSON.stringify(featuredStoreData)); //returns correctly
    console.log(JSON.stringify(normalStoreData)); //undefined

    if (!stores) {
        return null;
    }

    return stores.map(
        (store): StoreCard => (
            <div>
                <h2>{title} Stores</h2>
                <StoreCard
                    key={`store-${type}-key-${store.store_id}`}
                    name={store.name}
                />
            </div>
        )
    );
};

In the console.logs the one printing the first hook always returns the correct data. So for example if I switch the order of the hooks to look like...

const { loading: loadingStores, error: errorStore, data: normalStoreData } = useQuery(GET_STORES);  
const { loading: loadingFeaturedStores, error: errorFeaturedStore, data: featuredStoreData } = useQuery(GET_FEATURED_STORES);

The second console.log will provide me with the correct data.

Thank you in advance! I would just go back and use the from Apollo-React but want to give out functional components and hooks a try.

Edit: After more time testing it appears to have to do with loading not working as intended? Seems to always get stuck at the loading conditional even though it shouldn't.

Edit 2: I moved the loading logic and the mapping of the data into the store component into the functional component's render method and it worked liked advertised. I am still not able to get past loading while trying to render my store component in a functional components method. Is react not rerendering my components as it doesn't detect the change that the variable loading will cause once it turns to false?

athammer
  • 159
  • 1
  • 14

1 Answers1

3

The issue was my condition was !loading when it should of been loading which caused nothing to be rendered.

Leaving this up to shame myself and in case any of my code helps anyone else.

athammer
  • 159
  • 1
  • 14