Boost Your React Apps with Apollo: First Steps

Prettier and Apollo GraphQL for VS Code

If you're using Visual Studio Code, I want to draw your attention to two extensions that can help a lot:

After you install Prettier, create a file called .prettierrc at the root of the habit-tracker folder and give it an empty configuration object. You're welcome to customize your configuration, I just find it much easier to leave it at the defaults. You'll also want to head to the Command Palette (cmd+shift+P on a Mac, ctrl+shift+P on Windows) to turn on "Format on Save."

With the Apollo GraphQL extension, you'll need to create a file called apollo.config.js at the root of the habit-tracker folder and add this configuration:

module.exports = {
  client: {
    service: {
      name: "habit-tracker-server",
      url: "http://localhost:4000",

This will get us intellisense for the server schema as we write our queries and mutations throughout the course.

In the next video, we'll set up Apollo Client with React.