react-apollo

by howtographql

howtographql /react-apollo
489 Stars 226 Forks Last release: Not found MIT License 154 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React & Apollo Tutorial

This is the sample project that belongs to the React & Apollo Tutorial on How to GraphQL.

How to use

1. Clone repository

git clone https://github.com/howtographql/react-apollo/

2. Install dependencies & Deploy the Prisma database API

To install the Prisma CLI globally with Yarn, use the following command:

sh
yarn global add prisma

Also, run the following commands:

sh
cd react-apollo/server
yarn install
prisma deploy

Then, follow these steps in the interactive CLI wizard:

  1. Select Demo server
  2. Authenticate with Prisma Cloud in your browser (if necessary)
  3. Back in your terminal, confirm all suggested values
Alternative: Run Prisma locally via Docker
  1. Ensure you have Docker installed on your machine. If not, you can get it from here.
  2. Create docker-compose.yml for MySQL (see here for Postgres):
    version: '3'
    services:
      prisma:
        image: prismagraphql/prisma:1.23
        restart: always
        ports:
        - "4466:4466"
        environment:
          PRISMA_CONFIG: |
            port: 4466
            databases:
              default:
                connector: mysql
                host: mysql
                port: 3306
                user: root
                password: prisma
                migrations: true
      mysql:
        image: mysql:5.7
        restart: always
        environment:
          MYSQL_ROOT_PASSWORD: prisma
        volumes:
          - mysql:/var/lib/mysql
    volumes:
      mysql:
  3. Run docker-compose up -d
  4. Run prisma deploy

3. Start the server

To start the server, all you need to do is execute the

start
script by running the following command inside the
server
directory:
yarn start

Note: If you want to interact with the GraphQL API of the server inside a GraphQL Playground, you can navigate to http://localhost:4000.

4. Run the app

Now that the server is running, you can start the React app as well. The commands need to be run in a new terminal tab/window inside the root directory

react-apollo
(because the current tab is blocked by the process running the server):
yarn install
yarn start

You can now open your browser and use the app on http://localhost:3000.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.