Odyssey

Lift-off I: Basics

Feature overview and setupFeature data requirementsSchema definition language (SDL)Building our schemaApollo ServerApollo ExplorerThe frontend appApollo Client setupDefining a queryThe useQuery hook
7. The frontend app
1m
You're currently on an older version of this course. View course changelog.

🖼 Frontend first steps

Our frontend client is a React app. It uses Reach Router for routing and Emotion for styling components.

Let's open the client/ directory in our IDE. Within the src directory we have a few subdirectories: pages, containers, components, and assets:

📂 client
┣ 📂 src
┃ ┣ 📂 assets
┃ ┣ 📂 components
┃ ┣ 📂 containers
┃ ┣ 📂 pages
┃ ┣ ...
┣ ...

We'll spend most of our time in the pages/ and containers/ directories, interacting with our GraphQL server via Apollo Client.

The components/ folder holds our UI React components. Those are only responsible for displaying the data they receive via props. Those components are already built, because they aren't the focus of this course.

Let's take the app for a spin and see how it looks right now! From the client/ directory, run:

npm start

The app builds and is then served from port 3000. For now, it's just an empty layout with a navigation bar, a title, a logo, a background, and... that's it.

Task!
Previous
Next

Share your questions and comments about this lesson

Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.

              Router

              The single access point for a federated GraphQL architecture. It receives incoming operations and intelligently routes them across component services before returning a unified response.

              GraphQL server

              A server that contains a GraphQL schema and can resolve client-requested operations that are executed against that schema.

              NEW COURSE ALERT

              Introducing Apollo Connectors

              Connectors are the new and easy way to get started with GraphQL, using existing REST APIs.

              Say goodbye to GraphQL servers and resolvers—now, everything happens in the schema!

              Take the course