GraphQL NewsFeed

A news feed build with graphql-yoga and prisma

Installation

1. Clone or download the repository and in the root folder run npm i to install all packages

2. An SQLite database generated by prisma is used for this project, so run the following commands in a terminal window to set up the database and run the migrations:

   • npx prisma migrate up --experimental
   • npx prisma generate

   These two commands should generate the (SQLite) database migrations in the prisma folder of this project and initialize the prisma client.

3. Run node src/index.js to start the GraphQL server.

4. You can then proceed to http://localhost:4000 to use the GraphQL playground to run queries against the API.

Note: To browse the database you can also open a separate terminal window and run npx prisma studio which will use your default browser to show you the data stored in the SQLite database.

Sample Queries

Sign up

You will first need to register a user in order to create news items/populate your news feed

mutation {
  signup(
    email: "ken@email.com",
    password: "mYc00lpass",
    name: "Kenneth"
  ) {
    token
    user {
      id
      name
      email
    }
  }
}

Log in

mutation {
  login(
    email: "ken@email.com"
    password: "mYc00lpass"
  ) {
    token
    user {
      id
      name
      email
    }
  }
}

Add, edit, delete posts/news items

Note: Be sure to use the token you received from logging in and set it as the authorization http header in these requests e.g.

{
  "Authorization": "Bearer <TOKEN>"
}

Add post

mutation {
  postLink(
    url: "henga.co"
    description: "A software consulting company."
  ) {
    id
    url
    description
  }
}

Edit/update post

mutation {
  updateLink(
    id: "2"
    description: "A very cool software consulting company"
  ) {
    id
    url
    description
    votes {
      id
      user {
        name
      }
    }
  }
}

Delete post

mutation {
  deleteLink(
    id: 8
  ) {
    id
    url
  }
}

Upvote post

mutation {
  vote(linkId: 2) {
    link {
      url
      description
    }
    user {
      name
      email
    }
  }
}

View feed

query {
  feed(
    filter: {},
  	clauses: {}
  ) {
    links {
      id
      description
      url
      postedBy {
        name
      }
      votes {
        id
      }
    }
  }
}

Realtime subscriptions to events

You can be alerted when an event takes place by opening a new tab in the GraphQL server playground and using a subscription endpoint to receive real-time updates on certain actions, namely:

New votes

subscription {
  newVote {
    id
    link {
      id
      url
      description
    }
    user {
      id
      name
    }
  }
}

New posts

subscription {
  newLink {
    id
    url
    description
    postedBy {
      id
      name
    }
    votes {
      user {
        name
      }
    }
  }
}