Render fetched shots

.env

@@ -1,2 +0,0 @@
-# .env.development
-API_URI=https://api-dev.example.com/graphql

App.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import { Text } from "react-native";
 import ClientProvider from "./graphql/client";
+import ShotsContainer from "./component/shot";
 
 const App: React.FC = () => {
 	return (
 		<ClientProvider>
+			<ShotsContainer />
 			<Text>test</Text>
 		</ClientProvider>
 	);

component/display-shot.tsx

@@ -0,0 +1,14 @@
+import { Text, View } from "react-native";
+
+function DisplayShots({ data }) {
+	const renderShots = (shots) => {
+		return shots.map((shot) => (
+			<View key={shot.id}>
+				<Text>{shot.id}</Text>
+			</View>
+		));
+	};
+	return renderShots(data);
+}
+
+export default DisplayShots;

component/shot.tsx

@@ -0,0 +1,16 @@
+import DisplayShots from "./display-shot";
+import withQueryHandling from "./with-query-handling";
+import { GET_SHOTS } from "../graphql/query";
+
+const ShotsContainer = withQueryHandling({
+	WrappedComponent: DisplayShots,
+	query: GET_SHOTS,
+	dataKey: "getShots",
+	queryOptions: {
+		variables: {
+			includeCueObjectAngle: true,
+		},
+	},
+});
+
+export default ShotsContainer;

graphql/query.ts

@@ -0,0 +1,21 @@
+import { gql } from "@apollo/client";
+
+export const GET_SHOTS = gql`
+	query GetShots(
+		$includeCueObjectAngle: Boolean! = false
+		$includeCueObjectDistance: Boolean! = false
+	) {
+		getShots {
+			id
+			videoId
+			features {
+				...ShotFeatures
+			}
+		}
+	}
+
+	fragment ShotFeatures on ShotFeaturesGQL {
+		cueObjectAngle @include(if: $includeCueObjectAngle)
+		cueObjectDistance @include(if: $includeCueObjectDistance)
+	}
+`;

tests/App.test.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import renderer from "react-test-renderer";
-
-import App from "../App";
-
-
-describe("<App />", () => {
-    it("has 1 child", () => {
-        const tree = renderer.create(<App />).toJSON();
-        expect(tree.children.length).toBe(1);
-    });
-});