React & Apollo Tutorial

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

Running the App

1. Clone repository

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

2. Deploy the Prisma database service

cd server
yarn install
prisma deploy

You can use the prisma CLI without having it globally installed because it's listed as a development dependency in package.json.

When prompted where (i.e. to which cluster) you want to deploy your service, choose any of the public clusters, e.g. public-us1 or public-eu1. (If you have Docker installed, you can also deploy locally.)

3. Set the Prisma service endpoint

From the output of the previous command, copy the HTTP endpoint and paste it into server/src/index.js where it's used to instantiate the Prisma binding. You need to replace the current placeholder __PRISMA_ENDPOINT:

const server = new GraphQLServer({
  typeDefs: './src/schema.graphql',
  resolvers,
  context: req => ({
    ...req,
    db: new Prisma({
      typeDefs: 'src/generated/prisma.graphql',
      endpoint: "__PRISMA_ENDPOINT__",
      secret: 'mysecret123',
    }),
  }),
})

For example:

const server = new GraphQLServer({
  typeDefs: './src/schema.graphql',
  resolvers,
  context: req => ({
    ...req,
    db: new Prisma({
      typeDefs: 'src/generated/prisma.graphql',
      endpoint: "https://eu1.prisma.sh/public-hillcloak-flier-942261/hackernews-graphql-js/dev",
      secret: 'mysecret123',
    }),
  }),
})

Note that the part public-hillcloak-flier-952361 of the URL is unique to your service.

4. 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 install
yarn start

5. Run the app

Now that the server is running, you can run the app as well (the command needs to be run in a new terminal tab/window inside the root directory react-apollo):

yarn start

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