diff --git a/.env b/.env
deleted file mode 100644
index 690bd0d..0000000
--- a/.env
+++ /dev/null
@@ -1,2 +0,0 @@
-# .env.development
-API_URI=https://api-dev.example.com/graphql
diff --git a/App.tsx b/App.tsx
index 0952f25..6a47ac6 100644
--- a/App.tsx
+++ b/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>
 	);
diff --git a/component/display-shot.tsx b/component/display-shot.tsx
new file mode 100644
index 0000000..5c4d1e6
--- /dev/null
+++ b/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;
diff --git a/component/shot.tsx b/component/shot.tsx
new file mode 100644
index 0000000..e959534
--- /dev/null
+++ b/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;
diff --git a/graphql/query.ts b/graphql/query.ts
new file mode 100644
index 0000000..2ee1556
--- /dev/null
+++ b/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)
+	}
+`;
diff --git a/tests/App.test.tsx b/tests/App.test.tsx
deleted file mode 100644
index f2d91c3..0000000
--- a/tests/App.test.tsx
+++ /dev/null
@@ -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);
-    });
-});