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

Reviewed-on: billnerds/rn-playground#15
This commit is contained in:
Kat Huang 2024-01-09 10:47:58 -07:00
commit 83a648eb90
8 changed files with 76 additions and 15 deletions

2
.env
View File

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

View File

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

View File

@ -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;

16
component/shot.tsx Normal file
View File

@ -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;

View File

@ -7,6 +7,8 @@ import {
from, from,
} from "@apollo/client"; } from "@apollo/client";
import { API_URI } from "@env"; import { API_URI } from "@env";
import { SHOT_FEATURES_FRAGMENT } from "./fragment/shot";
import { createFragmentRegistry } from "@apollo/client/cache";
type Props = { type Props = {
children: ReactNode; children: ReactNode;
@ -16,10 +18,13 @@ const ClientProvider: React.FC<Props> = ({ children }) => {
const httpLink = new HttpLink({ const httpLink = new HttpLink({
uri: API_URI, uri: API_URI,
}); });
const cache = new InMemoryCache({
fragments: createFragmentRegistry(SHOT_FEATURES_FRAGMENT),
});
const client = new ApolloClient({ const client = new ApolloClient({
link: from([httpLink]), link: from([httpLink]),
cache: new InMemoryCache(), cache: cache,
}); });
return <ApolloProvider client={client}>{children}</ApolloProvider>; return <ApolloProvider client={client}>{children}</ApolloProvider>;

13
graphql/fragment/shot.ts Normal file
View File

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

25
graphql/query.ts Normal file
View File

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

View File

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