I am having an issue with this code for a bit now. I think the problem is in my useEffect hook with the "{ id: '' }". When I console.log this data from my sanity.io client, the data comes up as null. My "{ id: '' }" is supposed to reference the $id in the "_id == $id. The groq query will work when i use it in my testing environment. But it will not console.log the data to the page.
import { View, Text, ScrollView } from 'react-native'
import React, { useEffect, useState } from 'react'
import { ArrowRightIcon } from 'react-native-heroicons/outline'
import ResturauntCard from './ResturauntCard'
import sanityClient from '../sanity'
const FeaturedRow = ({ title, description, id }) => {
const [restaurants, setResturants] = useState([]);
useEffect(() => {
sanityClient.fetch(`
*[_type == "featured" && _id == $id ] {
...,
restaurants[]->{
...,
dishes[]->,
type-> {
name
}
},
}[0]
`,
{ id: '' }
).then((data) => {
console.log(data)
setResturants(data?.restaurants)
})
}, []);
return (
<View>
<View className="mt-4 flex-row items-center justify-between px-4" >
<Text className="font-bold text-lg" >{title}</Text>
<ArrowRightIcon color="#00CCBB" />
</View>
<Text className="text-xs text-gray-500 px-4" >{description}</Text>
<ScrollView
horizontal
contentContainerStyle={{
paddingHorizontal: 15,
}}
showsHorizontalScrollIndicator={false}
className="pt-4"
>
{
restaurants?.map((restaurant => {
<ResturauntCard
key={restaurant._id}
id={restaurant.id}
imgUrl={restaurant.image}
address={restaurant.address}
title={restaurant.name}
dishes={restaurant.dishes}
rating={restaurant.rating}
genre={restaurant.type?.name}
short_description={restaurant.short_description}
long={restaurant.long}
lat={restaurant.lat}
/>
}))
}
</ScrollView>
</View>
)
}
export default FeaturedRow
This piece of code for a different section of my app does work and pulls the data.
import { View, Text, SafeAreaView, Image, TextInput, ScrollView } from 'react-native'
import React, { useLayoutEffect, useState, useEffect } from 'react'
import { useNavigation } from "@react-navigation/native"
import { UserIcon, ChevronDownIcon, MagnifyingGlassIcon, AdjustmentsVerticalIcon, } from 'react-native-heroicons/outline'
import Categories from '../components/Categories'
import FeaturedRow from '../components/FeaturedRow'
import sanityClient from '../sanity'
const HomeScreen = () => {
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
})
}, [])
const navigation = useNavigation();
const [featuredCategories, setFeaturedCategories] = useState()
useEffect(() => {
sanityClient.
fetch(
` *[_type == "featured" ]{
...,
restaurants[]->{
...,
dishes[]->,
type-> {
...,
}
},
} `).then((data) => {
setFeaturedCategories(data)
})
}, [])
console.log(featuredCategories)
return (
<SafeAreaView className="bg-white pt-5" >
{/* Header */}
<View className="flex-row pb-3 items-center mx-4 space-x-2" >
<Image
source={{
uri: 'https://links.papareact.com/wru'
}}
className="h-7 w-7 bg-gray-300 rounded-full"
/>
<View className="flex-1" >
<Text className="font-bold text-grey-400 text-xs" >Deliver Now!</Text>
<Text
className="font-bold text-xl">Current Location
<ChevronDownIcon size={20} color="#00CCBB" />
</Text>
</View>
<UserIcon size={35} color='#00CCBB' />
</View>
{/* Search Bar */}
<View className="flex-row items-center space-x-2 pb-2 mx-4 " >
<View className="flex-row flex-1 space-x-2 bg-gray-200 p-3" >
<MagnifyingGlassIcon color='#00CCBB' />
<TextInput
placeholder='Resturants and Cuisines'
keyboardType='default'
/>
</View>
<AdjustmentsVerticalIcon color='#00CCBB' />
</View>
<ScrollView
contentContainerStyle={{
paddingBottom: 100,
}} >
{/* Categories */}
<Categories />
{/* Featured */}
{featuredCategories?.map((category) => (
<FeaturedRow
key={category._id}
id={category.id}
title={category.name}
description={category.short_description}
/>
))}
</ScrollView>
</SafeAreaView>
)
}
export default HomeScreen
This piece of code will map correctly in another section of my app.
Thank you for looking at my code.
