From 5192212e0e89ec945de385ddba3bb8ce6356e0bd Mon Sep 17 00:00:00 2001 From: Kat Huang Date: Mon, 8 Jan 2024 22:14:21 -0700 Subject: [PATCH 1/3] Render fetched shots --- .env | 2 -- App.tsx | 2 ++ component/display-shot.tsx | 14 ++++++++++++++ component/shot.tsx | 16 ++++++++++++++++ graphql/query.ts | 21 +++++++++++++++++++++ tests/App.test.tsx | 12 ------------ 6 files changed, 53 insertions(+), 14 deletions(-) delete mode 100644 .env create mode 100644 component/display-shot.tsx create mode 100644 component/shot.tsx create mode 100644 graphql/query.ts delete mode 100644 tests/App.test.tsx 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 ( + test ); 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) => ( + + {shot.id} + + )); + }; + 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("", () => { - it("has 1 child", () => { - const tree = renderer.create().toJSON(); - expect(tree.children.length).toBe(1); - }); -}); From fcdce8706fccd8d7fe12bf0de8a27a8f8e81c3ab Mon Sep 17 00:00:00 2001 From: Kat Huang Date: Mon, 8 Jan 2024 22:23:51 -0700 Subject: [PATCH 2/3] Create shot features fragment --- graphql/fragment/shot-features.ts | 10 ++++++++++ graphql/query.ts | 7 ++----- 2 files changed, 12 insertions(+), 5 deletions(-) create mode 100644 graphql/fragment/shot-features.ts diff --git a/graphql/fragment/shot-features.ts b/graphql/fragment/shot-features.ts new file mode 100644 index 0000000..9078775 --- /dev/null +++ b/graphql/fragment/shot-features.ts @@ -0,0 +1,10 @@ +import { gql } from "@apollo/client"; + +const SHOT_FEATURES_FRAGMENT = gql` + fragment ShotFeatures on ShotFeaturesGQL { + cueObjectAngle @include(if: $includeCueObjectAngle) + cueObjectDistance @include(if: $includeCueObjectDistance) + } +`; + +export default SHOT_FEATURES_FRAGMENT; diff --git a/graphql/query.ts b/graphql/query.ts index 2ee1556..cf15d19 100644 --- a/graphql/query.ts +++ b/graphql/query.ts @@ -1,6 +1,8 @@ import { gql } from "@apollo/client"; +import SHOT_FEATURES_FRAGMENT from "./fragment/shot-features"; export const GET_SHOTS = gql` + ${SHOT_FEATURES_FRAGMENT} query GetShots( $includeCueObjectAngle: Boolean! = false $includeCueObjectDistance: Boolean! = false @@ -13,9 +15,4 @@ export const GET_SHOTS = gql` } } } - - fragment ShotFeatures on ShotFeaturesGQL { - cueObjectAngle @include(if: $includeCueObjectAngle) - cueObjectDistance @include(if: $includeCueObjectDistance) - } `; From 5204599a08270f1f1a6df67b43288f5089476e23 Mon Sep 17 00:00:00 2001 From: Kat Huang Date: Mon, 8 Jan 2024 22:31:08 -0700 Subject: [PATCH 3/3] Register fragment --- graphql/client.tsx | 7 ++++++- graphql/fragment/shot-features.ts | 10 ---------- graphql/fragment/shot.ts | 13 +++++++++++++ graphql/query.ts | 13 ++++++++++--- 4 files changed, 29 insertions(+), 14 deletions(-) delete mode 100644 graphql/fragment/shot-features.ts create mode 100644 graphql/fragment/shot.ts 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 = ({ 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 {children}; diff --git a/graphql/fragment/shot-features.ts b/graphql/fragment/shot-features.ts deleted file mode 100644 index 9078775..0000000 --- a/graphql/fragment/shot-features.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { gql } from "@apollo/client"; - -const SHOT_FEATURES_FRAGMENT = gql` - fragment ShotFeatures on ShotFeaturesGQL { - cueObjectAngle @include(if: $includeCueObjectAngle) - cueObjectDistance @include(if: $includeCueObjectDistance) - } -`; - -export default SHOT_FEATURES_FRAGMENT; 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 index cf15d19..b4329cf 100644 --- a/graphql/query.ts +++ b/graphql/query.ts @@ -1,15 +1,22 @@ import { gql } from "@apollo/client"; -import SHOT_FEATURES_FRAGMENT from "./fragment/shot-features"; export const GET_SHOTS = gql` - ${SHOT_FEATURES_FRAGMENT} query GetShots( - $includeCueObjectAngle: Boolean! = false $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 }