wip
This commit is contained in:
parent
adc0b83634
commit
51c2cbf4f1
|
@ -4,6 +4,9 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"apollo-boost": "^0.1.27",
|
"apollo-boost": "^0.1.27",
|
||||||
|
"graphql": "^14.1.1",
|
||||||
|
"graphql-tag": "^2.10.1",
|
||||||
|
"graphql.macro": "^1.3.3",
|
||||||
"react": "^16.7.0",
|
"react": "^16.7.0",
|
||||||
"react-apollo": "^2.4.0",
|
"react-apollo": "^2.4.0",
|
||||||
"react-dom": "^16.7.0",
|
"react-dom": "^16.7.0",
|
||||||
|
@ -13,7 +16,8 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^16.7.20",
|
"@types/react": "^16.7.20",
|
||||||
"@types/react-dom": "^16.0.11"
|
"@types/react-dom": "^16.0.11",
|
||||||
|
"ts-transform-graphql-tag": "^0.2.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
|
|
31
src/app.tsx
31
src/app.tsx
|
@ -1,14 +1,33 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import ApolloClient from 'apollo-boost';
|
||||||
|
import { ApolloProvider } from 'react-apollo';
|
||||||
|
import CreateReservation from './createReservation';
|
||||||
|
|
||||||
|
const apolloClient = new ApolloClient({
|
||||||
|
uri: "http://localhost:4000"
|
||||||
|
});
|
||||||
|
|
||||||
|
// ⚽️ Goal
|
||||||
|
// --------
|
||||||
|
|
||||||
|
// We want to create a webapp to reserve products (food).
|
||||||
|
// Some ingredients we need: a store, products and reservations.
|
||||||
|
// First of all we want a list of stores. After we have chosen
|
||||||
|
// a store, we get a list of products (query) of that store.
|
||||||
|
// We pick some products, pick a quantity, and we make a reservation (mutation)
|
||||||
|
|
||||||
|
// 🏪 Exercise 1
|
||||||
|
// --------------
|
||||||
|
|
||||||
|
// 1) First we need to create a query to get all the stores.
|
||||||
|
//
|
||||||
|
|
||||||
class App extends React.PureComponent {
|
class App extends React.PureComponent {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<ApolloProvider client={apolloClient}>
|
||||||
<h1>Hello everyone! This will become our foodies reservation webapp!</h1>
|
<CreateReservation />
|
||||||
<br />
|
</ApolloProvider>
|
||||||
<br />
|
|
||||||
<img src="https://sayingimages.com/wp-content/uploads/im-on-a-seafood-diet-food-memes.jpg" />
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { compose } from 'react-apollo';
|
||||||
|
import { getStoresQuery } from './queries';
|
||||||
|
|
||||||
|
interface CreateReservationProps {
|
||||||
|
storesData: object;
|
||||||
|
}
|
||||||
|
|
||||||
|
class CreateReservation extends React.PureComponent<CreateReservationProps> {
|
||||||
|
render() {
|
||||||
|
const { storesData } = this.props;
|
||||||
|
console.warn('stores data', storesData);
|
||||||
|
return (
|
||||||
|
<form>
|
||||||
|
<select>
|
||||||
|
<option value="volvo">Volvo</option>
|
||||||
|
</select>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default compose(getStoresQuery)(CreateReservation);
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { gql } from 'graphql.macro';
|
||||||
|
import { graphql } from 'react-apollo';
|
||||||
|
|
||||||
|
export const GET_STORES = gql`
|
||||||
|
query getStores {
|
||||||
|
stores() {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const getStoresQuery = graphql(GET_STORES, {
|
||||||
|
name: 'storesData',
|
||||||
|
});
|
Loading…
Reference in New Issue