React & urql Tutorial

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

How to use

1. Clone repository

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

2. Install dependencies & Deploy the Prisma database API

Install the Prisma CLI globally with Yarn or npm:

yarn global add prisma
# or with npm:
npm i -g prisma

Also, run the following commands:

# install server dependencies & deploy
cd react-urql/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-urql (because the current tab is blocked by the process running the server):

# install app dependencies & deploy
yarn install
yarn start

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