Query graphql api using react query

.env

@@ -0,0 +1 @@
+EXPO_PUBLIC_GRAPQL_API_KEY = thataluna::local.net+1000::9e3d19bf6be3f41ed9e4208656794ca97d47a2c3eb6d75167918892ddc692607

api/index.graphql

@@ -1,3 +1,3 @@
-schema @sdl(files: ["curl/index.graphql"]) {
+schema @sdl(files: ["exercises/index.graphql"]) {
   query: Query
 }

package.json

@@ -9,17 +9,21 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.49.2",
     "expo": "~51.0.17",
+    "expo-constants": "~16.0.2",
+    "expo-linking": "~6.3.1",
+    "expo-router": "~3.5.17",
     "expo-status-bar": "~1.12.1",
+    "graphql": "^15.9.0",
+    "graphql-request": "^6.1.0",
+    "install": "^0.13.0",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-native": "0.74.2",
-    "expo-router": "~3.5.17",
-    "react-native-screens": "3.31.1",
-    "expo-linking": "~6.3.1",
-    "expo-constants": "~16.0.2",
     "react-native-safe-area-context": "4.10.1",
-    "react-native-web": "~0.19.10",
-    "react-dom": "18.2.0"
+    "react-native-screens": "3.31.1",
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

src/app/[name].jsx

@@ -1,19 +1,48 @@
-import { View, Text, ScrollView } from "react-native";
+import { View, Text, ScrollView, ActivityIndicator } from "react-native";
 import { useLocalSearchParams, Stack } from "expo-router";
 import exercises from "../../assets/data/exercises.json";
 import { StyleSheet } from "react-native";
 import { useState } from "react";
+import { gql } from "graphql-request";
+import { useQuery } from "@tanstack/react-query";
+import client from "../graphqlClient";
+
+
+const exerciseQuery = gql`
+  query exercises($name: String) {
+  exercises(name: $name) {
+    equipment
+    instructions
+    name
+    muscle
+  }
+}
+`;
+
 
 export default function ExerciseDetailsScreen() {
-  const params = useLocalSearchParams();
+
+  const { name } = useLocalSearchParams();
+
+  const {data, isLoading, error} = useQuery({
+    queryKey: ['exercises',name],
+    queryFn: () => client.request(exerciseQuery, { name }),
+  });
+
 
   const [isExpandInstructions, setIsExpandInstructions] = useState(false);
 
-  const exercise = exercises.find((item) => item.name === params.name);
-  if (!exercise) {
-    return <Text> Exercise not found</Text>;
+  if (isLoading){
+    return <ActivityIndicator/>;
+  }
+
+  if (error) {
+    return <Text>Failed to fetch data.</Text>
   }
 
+  const exercise = data.exercises[0];
+
+
   return (
     <ScrollView contentContainerStyle={styles.container}>
       <Stack.Screen options={{ title: exercise.name }} />

src/app/_layout.jsx

@@ -1,9 +1,14 @@
 import { Stack, Slot } from "expo-router";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+
+const client = new QueryClient();
 
 export default function RootLayout() {
-    return (
-    <Stack>
-        <Stack.Screen name="index" options={ {title: "Exercises"}} />
-    </Stack> 
-    );
-}
+  return (
+    <QueryClientProvider client={client} >
+      <Stack>
+        <Stack.Screen name="index" options={{ title: "Exercises" }} />
+      </Stack>
+    </QueryClientProvider>
+  );
+}

src/app/index.js

@@ -1,19 +1,52 @@
 import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View, FlatList } from "react-native";
+import {
+  StyleSheet,
+  Text,
+  View,
+  FlatList,
+  ActivityIndicator,
+} from "react-native";
 import exercises from "../../assets/data/exercises.json";
 import ExerciseListItem from "../components/ExerciseListItem";
+import { useQuery } from "@tanstack/react-query";
+import { gql } from "graphql-request";
+import client from "../graphqlClient";
 
 
+const exercisesQuery = gql`
+  query MyQuery($muscle: String, $name: String) {
+    exercises(name: $name, muscle: $muscle) {
+      muscle
+      name
+      equipment
+    }
+  }
+`;
 
-export default function App() {
+export default function ExercisesScreen() {
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["exercises"],
+    queryFn: () => client.request( exercisesQuery ),
+  });
+
+  if (isLoading) {
+    return <ActivityIndicator />;
+  }
+
+  if (error) {
+    console.log(error);
+    return <Text>Failed to fetch data.</Text>;
+  }
+
+  console.log(data);
   return (
     <View style={styles.container}>
       <FlatList
-        data={exercises}
-        contentContainerStyle = {{gap: 5}}
-        keyExtractor={(item, index) => item.name + index} 
-        renderItem={({ item }) => <ExerciseListItem item={item}/>}
-
+        data={data.exercises}
+        contentContainerStyle={{ gap: 5 }}
+        keyExtractor={(item, index) => item.name + index}
+        renderItem={({ item }) => <ExerciseListItem item={item} />}
       />
 
       <StatusBar style="auto" />
@@ -26,7 +59,5 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     padding: 10,
-
   },
-
 });

src/graphqlClient.js

@@ -0,0 +1,14 @@
+import { GraphQLClient } from "graphql-request";
+
+const url =
+  "https://thataluna.us-east-a.ibm.stepzen.net/api/invisible-donkey/graphql";
+
+const apiKey = process.env.EXPO_PUBLIC_GRAPQL_API_KEY;
+
+const client = new GraphQLClient(url, {
+  headers: {
+    Authorization: `apikey ${apiKey}`,
+  },
+});
+
+export default client;