Skip to content
This is the final project after following the "How To GraphQL: React + urql" tutorial
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public 1-end-getstarted Mar 3, 2018
server (fix) - make the example mutations run again Sep 3, 2019
src
.editorconfig
.gitignore
LICENSE
README.md Update dependencies and copy in READMEs Aug 28, 2019
package.json
yarn.lock Upgrade packages Sep 16, 2019

README.md

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.

You can’t perform that action at this time.