Commit 5c0790e

For this half of the tutorial, we will be working in the `client/` folder of the project. You should have the project already from the server portioned, but if you don't, make sure to clone [the tutorial](https://github.com/apollographql/fullstack-tutorial/). From the root of the project, run:

Now, our dependencies are installed. Here are the packages we will be using to build out our frontend:

- `react-apollo`: The view layer integration for React that exports components such as `Query` and `Mutation`

- `graphql-tag`: The tag function `gql` that we use to wrap our query strings in order to parse them into an AST

Next, create an Apollo config file called `apollo.config.js`. This config file is how you configure both the Apollo VSCode extension and CLI. Paste the snippet below into the file:

Great, we're all set up! Let's dive into building our first client.

type Launch {

id: ID!

rocket: Rocket

}

```

return {

id: launch.flight_number || 0,

cursor: `${launch.launch_date_unix}`,

mission: {

name: launch.mission_name,

missionPatchSmall: launch.links.mission_patch_small,

},

rocket: {

id: launch.rocket.rocket_id,

name: launch.rocket.rocket_name,

type: launch.rocket.rocket_type,

},

};

}

In this tutorial, we'll build an interactive app for reserving your spot on an upcoming Space-X launch. You can think of it as an Airbnb for space travel! All of the data is real, thanks to the [SpaceX-API](https://github.com/r-spacex/SpaceX-API).

Here's what the finished app will look like:

The app has five screens: a login screen, a list of launches, a launch detail, a profile page, and a cart. The graph API powering our space app connects to a REST API and a SQLite database. Don't worry if you're unfamiliar with those technologies, you don't need to know how to build a REST API or SQLite database from scratch in order to complete the tutorial.

git clone https://github.com/apollographql/fullstack-tutorial/

<h3 id="help">Where can I get help?</h3>

<h2 id="store-initializers">Initialize the store</h2>

_src/index.js_

authorization: localStorage.getItem('token'),

},

}),

isLoggedIn: () => !!localStorage.getItem('token'),

cartItems: () => [],

},

});

Now that we've added default state to the Apollo cache, let's learn how to query local data from within our React components.

<Fragment>

<Header>My Cart</Header>

{!data.cartItems || !data.cartItems.length ? (

) : (

<Fragment>

{data.cartItems.map(launchId => (

>

{(bookTrips, { data, loading, error }) =>

data && data.bookTrips && !data.bookTrips.success ? (

) : (

)

}

</Mutation>

const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });

const data = {

cartItems: cartItems.includes(id)

: [...cartItems, id],

};

cache.writeQuery({ query: GET_CART_ITEMS, data });

},

]}

>

return (

<div>

{isBooked

? 'Cancel This Trip'

: isInCart

_src/pages/login.js_

export default function Login() {

return (

<ApolloConsumer>

client.writeData({ data: { isLoggedIn: true } });

}}

>

</Mutation>

)}

</ApolloConsumer>

return (

<Fragment>

<Header>My Trips</Header>

If you try to render this query, you'll notice that it returns null. This is because we need to implement our login feature first. We're going to tackle login in the next section.

Query: {

launches: async (_, { pageSize = 20, after }, { dataSources }) => {

const allLaunches = await dataSources.launchAPI.getAllLaunches();

const launches = paginateResults({

after,

pageSize,

Mission: {

return size === 'SMALL'

? mission.missionPatchSmall

: mission.missionPatchLarge;

},

_src/index.js_

const server = new ApolloServer({

context: async ({ req }) => {

// simple auth check on every request

const auth = (req.headers && req.headers.authorization) || '';

const email = new Buffer(auth, 'base64').toString('ascii');

// if the email isn't formatted validly, return null for user

if (!isEmail.validate(email)) return { user: null };

const users = await store.users.findOrCreate({ where: { email } });

const user = users && users[0] ? users[0] : null;

return { user: { ...user.dataValues } };

}