useQuery with React Native FlatList component

[BrandonSM]

Hello! I'm trying to get different items of a menu for my BBQ trailer app (sides, sandwiches, pounds, drinks, desserts, etc..) and am using individual useQuery calls with Axios.

The problem I'm running into is when trying to pass the response from the useQuery call to the <FlatList/> component I'm getting the FlatList component empty. However the console.log(response) is logging the menu items.

Changing response to data in the Axios call doesn't change the behavior.

`
export default function MenuSides() {

const renderItem = ({ item }) => {
    return (
        <Text>Item - {item.item_data.name}</Text>
    )
};
const queryClient = useQueryClient();

  const { isLoading, isError, data, error } = useQuery('sides', () => 
    axios.post('https://connect.squareup.com/v2/catalog/search-catalog-items', {
      category_ids: [
        CATEGORY_ID
      ]
    }, {
      headers: {
        Authorization: 'Bearer ' + API_KEY,
      }
    } )
      .then(function (response) {
        // handle success
        console.log(response);
        return response; 
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
  ); 

// Render the Sides
if (isLoading) return <Text>Loading...</Text>;

if (isError) return <Text>An error has occurred: {error.message}</Text>;

return (
  <View style={{ flex: 1, flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start' }}>
    <FlatList
        data={response}
        renderItem={renderItem}
        ListEmptyComponent={<ActivityIndicator size="large"/>}
        contentContainerStyle={{ flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}
        keyExtractor={(item, index) => item.index}/>
  </View>
)

}
`

[TkDodo]

not sure if this is just a typo, but response does not exist in the component. You destruct the return value of useQuery:

const { isLoading, isError, data, error }

so your "response" is now data. This should do it:

- data={response}
+ data={data}

also, please bear in mind that catching errors manually in the queryFn is mostly not what you want - because it transforms failed promises to successful promises, and react-query needs a failed promise to set the error property. remove the .catch, and if you want to log errors, use the onError callback of the useQuery options.

[BrandonSM]

No typo... I stated changing response to data doesn't change things.

I guess my main question is what should I return from the axios call in the first then() to use data as the data in the FlatList component?

[TkDodo]

you don't need a then - you can just return axios. post(...)

but even your current example is okay:

      .then(function (response) {
        // handle success
        console.log(response);
        return response; 
      })

you return something that is called "response", but it's not named "response" outside of this "then" block.