Fetch the under items from API(relation)

Questions and Answers
1

Hello, i’m new in Strapi. I’m trying to access the images from a model that has a relationship with another model.
Let me explain more simply. I have model workman(person that perform services), and model Services. I fetch the services by category, after thah for example i click for one of them, and go to ServiceDetailScreen. There i have more info about given service. Also i have field Contractor. I call him that ({servicesList.attributes?.workman?.data.attributes.fullname} ) and i see name of workman. The name alone should send me away in profile of workman (WorkmanDetailsScreen).
When I go to the profile of workman I don’t see his picture.
The other data is visible but I don’t see his picture. I hand over data by props (const { workman } = route.params).
I guess I’m not doing the request correctly. Or maybe I should already use here GraphQl. Unfortunately I never used it. Here is my code: `const ServiceDetailScreen = ({ navigation, route }) => {
const { servicesList } = route.params;
const [modalVisible, setModalVisible] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(null);

const handleImagePress = (index) => {
setSelectedIndex(index);
setModalVisible(true);
};

const handleNextImage = () => {
if (selectedIndex < servicesList.attributes?.gallery?.data.length - 1) {
setSelectedIndex(selectedIndex + 1);
}
};

const handlePreviousImage = () => {
if (selectedIndex > 0) {
setSelectedIndex(selectedIndex - 1);
}
};

const renderItem = ({ item, index }) => (
<TouchableOpacity onPress={() => handleImagePress(index)}>
<Image source={{ uri: item.attributes.url }} style={styles.gridImage} />

);

const handleUserPress = (workman) => {
navigation.navigate(“Workman-Details”, { workman });
};

const workman = servicesList.attributes?.workman?.data;
return (


<FlatList
data={servicesList.attributes?.gallery?.data}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
numColumns={3}
contentContainerStyle={styles.grid}
/>

Name:
{servicesList.attributes.Name}


Description:
{servicesList.attributes.description}


Contractor:
{workman ? (
<TouchableOpacity onPress={() => handleUserPress(workman)} style={styles.workmanContainer}>

        <Text style={styles.textstyle2}>{workman.attributes.fullname}</Text>
      </TouchableOpacity>
    ) : (
      <Text style={styles.textstyle2}>N/A</Text>
    )}
  </View>
  <Modal
    animationType="slide"
    transparent={true}
    visible={modalVisible}
    onRequestClose={() => setModalVisible(false)}
  >
    <View style={styles.modalView}>
      <TouchableOpacity style={styles.arrowLeft} onPress={handlePreviousImage}>
        <Text style={styles.arrowText}>{'<'}</Text>
      </TouchableOpacity>
      <Image source={{ uri: servicesList.attributes?.gallery?.data?.[selectedIndex]?.attributes?.url }} style={styles.modalImage} />
      <TouchableOpacity style={styles.arrowRight} onPress={handleNextImage}>
        <Text style={styles.arrowText}>{'>'}</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.closeButton}
        onPress={() => setModalVisible(false)}
      >
        <Text style={styles.closeButtonText}>Close</Text>
      </TouchableOpacity>
    </View>
  </Modal>
</View>

);
};`
Аny advice is welcome.
This is app on React-Native

2

another unanswered question, maybe I’m not asking my questions correctly.
Let me answer myself. Yes with grapql it is achieved. I hope I am useful to someone who has a similar case.