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/client.tsx b/graphql/client.tsx
index 496469e..a5c4a1c 100644
--- a/graphql/client.tsx
+++ b/graphql/client.tsx
@@ -7,6 +7,8 @@ import {
 	from,
 } from "@apollo/client";
 import { API_URI } from "@env";
+import { SHOT_FEATURES_FRAGMENT } from "./fragment/shot";
+import { createFragmentRegistry } from "@apollo/client/cache";
 
 type Props = {
 	children: ReactNode;
@@ -16,10 +18,13 @@ const ClientProvider: React.FC<Props> = ({ children }) => {
 	const httpLink = new HttpLink({
 		uri: API_URI,
 	});
+	const cache = new InMemoryCache({
+		fragments: createFragmentRegistry(SHOT_FEATURES_FRAGMENT),
+	});
 
 	const client = new ApolloClient({
 		link: from([httpLink]),
-		cache: new InMemoryCache(),
+		cache: cache,
 	});
 
 	return <ApolloProvider client={client}>{children}</ApolloProvider>;
diff --git a/graphql/fragment/shot.ts b/graphql/fragment/shot.ts
new file mode 100644
index 0000000..9412514
--- /dev/null
+++ b/graphql/fragment/shot.ts
@@ -0,0 +1,13 @@
+import { gql } from "@apollo/client";
+
+export const SHOT_FEATURES_FRAGMENT = gql`
+	fragment ShotFeatures on ShotFeaturesGQL {
+		cueObjectDistance @include(if: $includeCueObjectDistance)
+		targetPocketDistance @include(if: $includeTargetPocketDistance)
+		cueObjectAngle @include(if: $includeCueObjectAngle)
+		cueBallSpeed @include(if: $includeCueBallSpeed)
+		intendedPocket @include(if: $includeIntendedPocket)
+		shotDirection @include(if: $includeShotDirection)
+		didMake @include(if: $includeDidMake)
+	}
+`;
diff --git a/graphql/query.ts b/graphql/query.ts
new file mode 100644
index 0000000..b4329cf
--- /dev/null
+++ b/graphql/query.ts
@@ -0,0 +1,25 @@
+import { gql } from "@apollo/client";
+
+export const GET_SHOTS = gql`
+	query GetShots(
+		$includeCueObjectDistance: Boolean! = false
+		$includeTargetPocketDistance: Boolean! = false
+		$includeCueObjectAngle: Boolean! = false
+		$includeCueBallSpeed: Boolean! = false
+		$includeIntendedPocket: Boolean! = false
+		$includeShotDirection: Boolean! = false
+		$includeDidMake: Boolean! = false
+	) {
+		getShots {
+			id
+			videoId
+			startFrame
+			endFrame
+			createdAt
+			updatedAt
+			features {
+				...ShotFeatures
+			}
+		}
+	}
+`;
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);
-    });
-});