Merge pull request 'Implement Containers for fetching shots' (#15) from get-shot-with-fragment into master

Reviewed-on: billnerds/rn-playground#15

.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/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>;

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)
+	}
+`;

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
+			}
+		}
+	}
+`;

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);
-    });
-});