2020-04-21 20:32:53 -07:00
|
|
|
import React from "react";
|
2020-04-22 14:02:23 -07:00
|
|
|
import { ApolloProvider } from "@apollo/react-hooks";
|
2020-04-21 20:32:53 -07:00
|
|
|
import { CSSReset, ThemeProvider, theme } from "@chakra-ui/core";
|
|
|
|
import WardrobePage from "./WardrobePage";
|
2020-04-21 17:49:52 -07:00
|
|
|
|
2020-04-22 14:02:23 -07:00
|
|
|
import ApolloClient from "apollo-boost";
|
|
|
|
|
2020-04-25 23:55:39 -07:00
|
|
|
/**
|
|
|
|
* client is the global Apollo Client instance we use for GraphQL queries. This
|
|
|
|
* is how we communicate with the server!
|
|
|
|
*/
|
2020-04-22 14:02:23 -07:00
|
|
|
const client = new ApolloClient({
|
|
|
|
uri: "/api/graphql",
|
2020-04-22 16:18:29 -07:00
|
|
|
cacheRedirects: {
|
|
|
|
Query: {
|
2020-04-25 23:55:39 -07:00
|
|
|
// Teach Apollo how to serve `items` queries from the cache. That way,
|
|
|
|
// when you remove an item from your outfit, or add an item from search,
|
|
|
|
// Apollo knows it already has the data it needs and doesn't need to ask
|
|
|
|
// the server again!
|
2020-04-22 16:18:29 -07:00
|
|
|
items: (_, args, { getCacheKey }) =>
|
|
|
|
args.ids.map((id) => getCacheKey({ __typename: "Item", id })),
|
|
|
|
},
|
|
|
|
},
|
2020-04-22 14:02:23 -07:00
|
|
|
});
|
|
|
|
|
2020-04-25 23:55:39 -07:00
|
|
|
/**
|
|
|
|
* App is the entry point of our application. There's not a ton of exciting
|
|
|
|
* stuff happening here, mostly just setting up some globals and theming!
|
|
|
|
*
|
|
|
|
* To really dive into the code, try going down into a page component!
|
|
|
|
*/
|
2020-04-21 17:49:52 -07:00
|
|
|
function App() {
|
|
|
|
return (
|
2020-04-22 14:02:23 -07:00
|
|
|
<ApolloProvider client={client}>
|
|
|
|
<ThemeProvider theme={theme}>
|
|
|
|
<CSSReset />
|
|
|
|
<WardrobePage />
|
|
|
|
</ThemeProvider>
|
|
|
|
</ApolloProvider>
|
2020-04-21 17:49:52 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|