DEV Community: pcreem

Create the first phpunit test

pcreem — Thu, 15 Apr 2021 05:27:46 +0000

Note: phpunit9 doesn't support php8^, it compatible with php7.4

clone the repo: https://github.com/pcreem/psr-4Autoload
install phpunit $composer require --dev phpunit/phpunit ^9

$./vendor/bin/phpunit --version
PHPUnit 9.0.0 by Sebastian Bergmann and contributors.

$code composer.json

{
    "autoload": {
        "psr-4": {
            "App\\":"App/"
        }
    },
    "require-dev": {
        "phpunit/phpunit": "^9"
    }
}

$code App/Data/Database.php

<?php
namespace App\Data;

class Database {
    public function sayHi()
    {
        return 'create database\n';
    }
}

$code tests/DatabaseTest.php

<?php declare(strict_types=1);
use PHPUnit\Framework\TestCase;
use App\Data\Database;

final class DatabaseTest extends TestCase
{
    public function testCanCreateDatabase(): void
    {
        $database = new Database();
        $this->assertSame('create database\n', $database->sayHi());
    }
}

$./vendor/bin/phpunit --testdox tests

output

PHPUnit 9.5.4 by Sebastian Bergmann and contributors.

Database
 ✔ Can create database
the init

Time: 00:00.006, Memory: 4.00 MB

OK (1 test, 1 assertion)

repo: https://github.com/pcreem/theFirstPhpUnitTest

Write a simple PSR-4 autoload

pcreem — Mon, 22 Mar 2021 08:07:45 +0000

$mkdir App
$mkdir App/Data
$code App/Data/Database.php

App/Data/Database.php

<?php
namespace App\Data;

class Database {
    public function __construct()
    {
        echo "the init\n";
    }

    public function sayHi()
    {
        echo "create database\n";
    }
}

$code composer.json

{
    "autoload": {
        "psr-4": {
            "App\\":"App/"
        }
    }
}

$code index.php

<?php
require __DIR__ . '/vendor/autoload.php';
use App\Data\Database;

$obj  = new Database();

echo $obj->sayHi();
?>

$composer dump
$php index.php

output

the init
create database

repo: https://github.com/pcreem/psr-4Autoload

Create mysql user and database

pcreem — Tue, 02 Mar 2021 01:29:05 +0000

$sudo mysql
mysql> CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';
mysql> GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';
mysql> \q

//login as newuser
$mysql -u newuser -p
mysql> CREATE DATABASE databasename; 

//option create table
mysql> CREATE TABLE Persons (
    PersonID int,
    LastName varchar(255),
    FirstName varchar(255),
    Address varchar(255),
    City varchar(255)
);

//insert multiple data
INSERT INTO table_name (column_list)
VALUES
    (value_list_1),
    (value_list_2),
    ...
    (value_list_n);

PHP8 constructor type test experiment

pcreem — Sat, 20 Feb 2021 07:57:09 +0000

PHP8 simplify constructor method from

//php7 version
class Point {
  public float $x;
  public float $y;
  public float $z;

  public function __construct(
    float $x = 0.0,
    float $y = 0.0,
    float $z = 0.0
  ) {
    $this->x = $x;
    $this->y = $y;
    $this->z = $z;
  }
}

class Point {
  public function __construct(
    public float $x = 0.0,
    public float $y = 0.0,
    public float $z = 0.0,
  ) {}
}

write a simple case

<?php    
    class Point {
        public function __construct(
          public string $name
        ) {}

        public function returnVal(){
            return $this->name;
        }
    }

    $testClass = new Point('the string case');
    print $testClass->returnVal();
?>

The output

the string case

check array in string test

turn 'the string case' to ['the string case']
The output

PHP Fatal error:  Uncaught TypeError: Point::__construct(): Argument #1 ($name) must be of type string, array given

works well

check number in string test

turn 'the string case' to 123

The output

There's no type error warning.
add declare(strict_types=1); to the top of code
The output

PHP Fatal error:  Uncaught TypeError: Point::__construct(): Argument #1 ($name) must be of type string, int given

Build a simple Laravel API

pcreem — Tue, 09 Feb 2021 10:38:46 +0000

A Controller with an API

$laravel new simpleAPI
$cd simpleAPI
$php artisan make:controller dummyAPI
$code app/Http/Controllers/dummyAPI.php

app/Http/Controllers/dummyAPI.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class dummyAPI extends Controller
{
    function getData(){
        return ["name"=>"alice"];
    }
}

routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\dummyAPI;

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get("data",[dummyAPI::class,'getData']);

$php artisan serve
Get http://127.0.0.1:8000/api/data on Postman or Browser
the output

{
    "name": "alice"
}

Controller plus Model and API
create database and table, use mysql as example

mysql> create database dummy;
$php artisan make:model Dummy -rmc
Model created successfully.
Created Migration: 2021_02_09_094710_create_dummies_table
Controller created successfully.

modify database/migrations/2021_02_09_094710_create_dummies_table.php

  public function up()
    {
        Schema::create('dummies', function (Blueprint $table) 
        {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }

migrate and insert data

$php artisan migrate
mysql> use dummy;
mysql> insert into dummies(name) values ('dummy1');
mysql> insert into dummies(name) values ('dummy2');

modify routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DummyController;

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get("data",[DummyController::class,'show']);

run php artisan serve
Get http://127.0.0.1:8000/api/data on Postman or Browser

[
    {
        "id": 1,
        "name": "dummy1",
        "created_at": null,
        "updated_at": null
    },
    {
        "id": 2,
        "name": "dummy2",
        "created_at": null,
        "updated_at": null
    }
]

CRUD API

CREATE

edit
app/Http/Controllers/DummyController.php

//add this to top of the code
use Symfony\Component\HttpFoundation\Response as Res;

...

    public function store(Request $request)
    {
        $dummy = Dummy::create($request->all());
        $dummy = $dummy->refresh();
        return response($dummy,Res::HTTP_CREATED);
    }

edit app/Models/Dummy.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class dummy extends Model
{
    use HasFactory;

    protected $fillable = [
        'name'
    ];
}

add

Route::apiResource('dummy',DummyController::class);

(optional) Install REST client on VS code
create dummy.http

POST http://127.0.0.1:8000/api/dummy HTTP/1.1
content-type:application/json

{
    "name":"henry"
}

click send request

//result
{
  "id": 3,
  "name": "henry",
  "created_at": "2021-02-10T04:15:28.000000Z",
  "updated_at": "2021-02-10T04:15:28.000000Z"
}

DELETE

edit app/Http/Controllers/DummyController.php

public function destroy(dummy $dummy)
    {
        $dummy->delete();
        return response(null, RES::HTTP_NO_CONTENT);
    }

send request in dummy.http
DELETE http://127.0.0.1:8000/api/dummy/1

UPDATE

edit app/Http/Controllers/DummyController.php

  public function update(Request $request, dummy $dummy)
    {
        $dummy->update($request->all());
        return response($dummy,RES::HTTP_OK);
    }

send request in dummy.http

PATCH http://127.0.0.1:8000/api/dummy/2 HTTP/1.1
content-type:application/json

{
    "name":"the modify one"
}

READ

read single data

edit app/Http/Controllers/DummyController.php

  public function show(dummy $dummy)
    {
        return response($dummy,RES::HTTP_OK);
    }

send request in dummy.http

GET http://127.0.0.1:8000/api/dummy/2 
content-type:application/json

read all data

edit app/Http/Controllers/DummyController.php

   public function index()
    {
        $dummy = Dummy::get();
        return response(['data' => $dummy], Res::HTTP_OK);
    }

send request in dummy.http

GET http://127.0.0.1:8000/api/dummy
content-type:application/json

repo: https://github.com/pcreem/basicLaravelApi

how to load data from txt file into mysql

pcreem — Mon, 01 Feb 2021 03:53:12 +0000

create database, table

mysql>CREATE DATABASE pet;
mysql>USE pet;
mysql>CREATE TABLE pet (name VARCHAR(20), owner VARCHAR(20), species VARCHAR(20), sex CHAR(1), birth DATE, death DATE);

create data in pet.txt (use \N to represent null data)

Whistler        Gwen    bird    \N      1997-12-09      \N
Bowser  Diane   dog     m       1979-08-31      1995-07-29

logout mysql and login with --local-infile=1 parameter

mysql --local-infile=1 -u user -p

load data and check result

mysql>USE pet;
mysql>LOAD DATA LOCAL INFILE '/path/pet.txt' INTO TABLE pet;
mysql>select * from pet;

+----------+-------+---------+------+------------+------------+
| name     | owner | species | sex  | birth      | death      |
+----------+-------+---------+------+------------+------------+
| Whistler | Gwen  | bird    | NULL | 1997-12-09 | NULL       |
| Bowser   | Diane | dog     | m    | 1979-08-31 | 1995-07-29 |
+----------+-------+---------+------+------------+------------+
2 rows in set (0.04 sec)

reference:
https://dev.mysql.com/doc/refman/8.0/en/loading-tables.html

Install Laravel on Ubuntu

pcreem — Thu, 28 Jan 2021 10:27:49 +0000

install php

$sudo apt install zip unzip software-properties-common
$sudo add-apt-repository ppa:ondrej/php
$sudo apt install -y php8.0 php8.0-gd php8.0-mbstring php8.0-xml php-zip

Apache2

$sudo apt install apache2 libapache2-mod-php8.0

MySQL

$sudo apt install mysql-server php8.0-mysql

(optional) Upgrade composer 2.0

$sudo apt install curl
$curl -sS https://getcomposer.org/installer -o composer-setup.php
$sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

Laravel installer

$composer global require laravel/installer

Edit Laravel path

$cd~
$nano .bashrc

add export PATH=$PATH:$HOME/.config/composer/vendor/bin to last line

$source ~/.bashrc

create & run project

$laravel new {project name}
$php artisan serve

open http://127.0.0.1:8000 on browser

(optional) VScode

$sudo snap install --classic code

Cypress next-auth mail authentication

pcreem — Sun, 11 Oct 2020 12:04:01 +0000

Authentication with email could simplify the signup process and prevent password mistakes. In the topic, we will use next-auth default email authentication method and test the workflow via cypress.

For quick start: repo

point check before cypress testing, make sure you can get the following results

after signup with an email, a notification on the webpage
an email notification in Mailtrap inbox
webpage turn to login state with httpOnly cookie

cypress authentication work flow

Aim to solve the following test:

send an email after a user signup
check the email has been received
make sure the email contains the link to the homepage
click the link in email redirect to the homepage
make sure the page turn to login state
keep user login after page refresh

Setting up

npx yarn add cypress
optional npx yarn add faker
A user signup with an email code .\cypress\integration\sample_spec.js

const faker = require('faker');
const randomEmail = faker.internet.email().toLowerCase();

describe('Login Test', () => {

    it('Visits the test page', () => {
      cy.visit('http://localhost:3000')
      cy.contains('Sign in').click()
      cy.url().should('include', '/api/auth/signin')

      cy.get('#input-email-for-email-provider')
        .type(randomEmail)
        .should('have.value', randomEmail)

        cy.contains('Sign in with Email').click()
        cy.contains('Check your email')

    });

    it('should send an email containing a verification link', () => {
        const inboxUrl = Cypress.env('inboxUrl')
        const token  = Cypress.env('Api-Token')

        cy.getLastEmail().then(html => {

          const link = html.match(/href="([^"]*)/)[1]
          cy.expect(link).to.contains('/api/auth/callback/email')
          cy.visit(link);
          cy.contains(`Signed in as ${randomEmail}`)
          cy.reload()
          cy.contains(`Signed in as ${randomEmail}`)
          //delete all mail
          cy.request({
            method: 'PATCH',
            url: `${inboxUrl}/clean`,
            headers: {
                'Api-Token': token,
                }
            });
        });
      });
  })

API interacts with Mailtrap to get last mail code .\cypress\support\commands.js

const inboxUrl = Cypress.env('inboxUrl')
const token  = Cypress.env('Api-Token')

Cypress.Commands.add('getLastEmail', () => {
    function requestEmail() {
      return cy
        .request({
          method: 'GET',
          url: `${inboxUrl}/messages`,
          headers: {
            'Api-Token': token,
          },
          json: true,
        })
        .then(({ body }) => {

          if (body) {

            let msgId = body[0].id
            cy.request({
            method: 'GET',
            url: `${inboxUrl}/messages/${msgId}/body.html`,
            headers: {
                'Api-Token': token,
            },
            json: true,
            }).then(({ body }) => { 
                if (body) { return body }

                cy.wait(1000);  
                return requestEmail();
            })
          }
        });
    }

    return requestEmail();
  });

configuration

code cypress.json
there could have network problems during the test, use "retries" to retry the test will save your time, visit cypress page for more info

{
    "retries": 3 
}

code cypress.env.json

{
    "inboxUrl":"Your Mailtrap Inbox url with inboxId",
    "Api-Token":"Your Mailtrap API token"
}

npx cypress open
run sample_spec.js test

the result should like this

make a automatical process

npx yarn add start-server-and-test
npx start-server-and-test 'next dev' 3000 'cypress run'

Use cache to catch data without page refresh

pcreem — Sun, 13 Sep 2020 06:43:49 +0000

demo

problem aim to solve

In a React todo-list development page, data can't update synchronously with CRUD in the database. Users need to refresh the browser to get the latest information, which made a stuck browser experience. Here gonna use cache, which is a temporary data storage location, and todo-list create/delete to make the problem solve example.

prerequisite

GraphQL client
1. urql: a GraphQL client
2. @urql/exchange-graphcache: for cache setting
3. graphql-tag: a utility for parsing GraphQL queries
4. React / react-bootstrap (optional)
GraphQL server

conceptual code

a. set component, todo create/delete GraphQL queries

code .\src\components\todo.js

import React from 'react'
import gql from 'graphql-tag';
import { useQuery, useMutation } from 'urql';
import { InputGroup, FormControl, Button, Col, Row, Alert, Spinner } from 'react-bootstrap'; //optional

export const FEED_QUERY = gql` //show latest info
  query{
    info{
        id
        title
      }
  }
`;

const UPSERT_POST = gql` //exexute todo create 
  mutation upsertPost( $postId:ID!, $title: String!) {
    upsertPost( postId: $postId, title: $title) {
      id
      title
    }
  }
`

const DELETE_POST = gql`
  mutation deletePost($postId:ID!) {
    deletePost(postId: $postId) {
      id
    }
  }
`

const PostForm = (props) => {
  //Upsert Section
  let postId = 0
  const [title, setTitle] = React.useState('')

  const [upsertState, executeUpsert] = useMutation(UPSERT_POST)
  const upsert = React.useCallback(() => {
    if (title.length !== 0 && title.length <= 30) { executeUpsert({ postId, title }); }
  }, [executeUpsert, postId, title])

  return (
    <Col sm={8}>
      <InputGroup className="mb-3">
        <FormControl
          placeholder='Add Todo...'
          aria-label="Recipient's username"
          aria-describedby="basic-addon2"
          maxLength="30"
          value={title}
          onChange={e => setTitle(e.target.value)}
        />
        <InputGroup.Append>
          <Button
            variant="outline-secondary"
            disabled={upsertState.fetching}
            type="submit"
            onClick={() => { upsert(); setTitle('') }}
          >Add</Button>
        </InputGroup.Append>{'  '}
      </InputGroup>
    </Col>
  )
}

function Post({ post }) {
  //Delete Section
  const postId = post.id
  const [deleteState, executeDelete] = useMutation(DELETE_POST)
  const del = React.useCallback(() => {
    executeDelete({ postId })
  }, [executeDelete, postId])

  return (
    <Col >
      <Alert variant="light" disabled={deleteState.fetching} onClose={() => { del(); }} dismissible>
        <p>{post.title}</p>
      </Alert>
    </Col>
  )
}



const PostList = () => {
  const [result] = useQuery({ query: FEED_QUERY })
  const { data, fetching, error } = result

  if (fetching) return <><Spinner animation="border" role="status"><span className="sr-only">Loading...</span></Spinner></>

  if (error) return <div>Error</div>

  const postsToRender = data.info
  return (
    <>
      {postsToRender.map(post => <Post key={post.id} post={post} />)}
    </>
  );
};

const Todo = (props) => {
  return (
    <>
      <br></br>
      <Row className="justify-content-md-center">
        <PostForm />
      </Row>
      <hr></hr>
      <Row className="justify-content-md-center">
        <PostList />
      </Row>
    </>
  )

}

export default Todo

b. cache setting

code .\src\index.js

//...React setting
import { Provider, Client, dedupExchange, fetchExchange } from 'urql'
import { cacheExchange } from '@urql/exchange-graphcache'
import { FEED_QUERY } from './components/todo.js'

const cache = cacheExchange({
  updates: {
    Mutation: { 
      upsertPost: (result, args, cache, info) => {  //execute create todo 
        cache.updateQuery({ query: FEED_QUERY }, data => { //update the latest information in cache 
          if (data !== null) {
            data.info.unshift(result.upsertPost);
            return data;
          } else {
            return null
          }
        });
      },
      deletePost: (result, args, cache, info) => { // execute delete todo
        cache.invalidate({ __typename: 'Post', id:  result.deletePost.id }); //delete todo in cache
      },
    },
  },
});

const client = new Client({
  url: '/',
  fetchOptions: () => {
    //...your fetch setting
  },
  exchanges: [dedupExchange, cache, fetchExchange],
}) 

ReactDOM.render(
  <Provider value={client}>
    <App />
  </Provider>,
  document.getElementById('root')
)

serviceWorker.unregister();

note

The todo-list will get user-related data in the demo, code is not shown here. You could write a todo-only code to experience the cache effect.

use httpOnly/sameSite cookie to make JWT authentication safer (local experiment)

pcreem — Sat, 12 Sep 2020 11:10:19 +0000

the pros and cons of storing token in local storage

One of the common ways to store a token on the front end is local-storage with the benefit of larger store sizes than a cookie and operate without a server. But the method also bring XSS an CSRF attack concern, such as
<img src="http://domain.not.exist" onerror=alert(localStorage.getItem.token);>

another token storage possibility

XSS execute by script, CSRF works when the original cookie sent to origin URL from different domains. To add more difficulty to XSS and CSRF is httpOnly and sameSite setting in the cookie. The cookie secure parameter makes data only transfer over the HTTPS protocol, which makes MitM attack not easily execute.

prerequisite

A React login page with GraphQL client
ngrok in React root folder
GraphQL server

conceptual code and setting

A. server side

code ./resolvers/mutation.js



async function login(parent, args, context, info) {
  //...user email/password verification
  const token = jwt.sign({ userId: user.id }, APP_SECRET)
  const options = {
    maxAge: 1000 * 60 * 15 , //expires in 15 minutes
    httpOnly: true, // client can't get cookie by script
    secure: true, // only transfer over https
    sameSite: true, // only sent for requests to the same FQDN as the domain in the cookie
  }
  context.request.res.cookie('token', token, options)

//Can't get token at the first client login request
  const returnToken = () => context.request.headers.cookie

  let { userId } = jwt.verify(returnToken().replace('token=', ''), APP_SECRET)
  if (userId === user.id) {
    console.log('ok') //checking result on server console
    return {
      user, //send user information to client
    }
  }
  throw new Error('Invalid request')

}

module.exports = { login }

please note the code can't get a cookie token at the first client request

B. Client-side

add to the end of code package.json ```

...
},
"proxy": "http://localhost:4000"
}

_After adding proxy and run on local, there will be a hosting error, which needs a configuration in .env. Remember to change your server API URL setting accordingly._

* `code .env`

DANGEROUSLY_DISABLE_HOST_CHECK=true

**The setting is dangerous as it named, please don't use it in production**  

### C. Start project 
* on server
`node index.js`

* on client
`npm start`
`.\ngrok.exe http 3000`

### D. Check result 
1. copy the ngrok **https** URL to the browser, then run your login on the client, if setting success, you will see 
  * the result on the Application field. The httpOnly, secure field should be marked and sameSite field named with strict
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w5w5xwjhnhnuu25ratjq.png)
  * an error on your server
`TypeError: Cannot read property 'replace' of undefined`
The reason is the login function can't send and get a cookie in the first client request.

2. send a login request again, there will be an `ok` on the server console, which means the server get token in the cookie. 

3. The client will get user information after token verify. In the case is a todo page. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jiqcwk298gzbs6actmkl.png)

### E. test httpOnly/https effect
* httpOnly: you can write a javascript to get the cookie

import Cookies from 'js-cookie'
export const getToken = () => Cookies.get(AUTH_TOKEN);

* https: use localhost:3000 or ngrok Http URL to test

# Issues and [Reference](https://medium.com/@ryanchenkie_40935/react-authentication-how-to-store-jwt-in-a-cookie-346519310e81)
1. Solve cookie token res/req in a more efficient way
2. Set refresh cookie for a smooth user experience
3. how/where to store and transfer user data

Build a GraphQL Todolist server on Prisma/PostgreSQL

pcreem — Wed, 09 Sep 2020 12:09:06 +0000

Github and Demo

Brief intro about GraphQL and Prisma

GraphQL is developed by Facebook in 2015. On the Client side, It makes nest data fetching easier by JSON like interface (as the image above), rather than multiple URLs or ORM/database request. On the Server side, you can update the data model by add or delete row at the aging field.

Prisma is an alternative ORM and SQL query builder.

The following will show how to build a GraphQL backend from scratch.

prerequisites:

Node.js installed on your machine
PostgreSQL database server running

A. setup database:

mkdir todo mkdir todo/backend cd todo/backend npm init -y npm install @prisma/cli - save-dev npx prisma init

database model:

code ./prisma/schema.prisma

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Post {
  id        Int      @default(autoincrement()) @id
  createdAt DateTime @default(now())
  title     String
  content   String? //question mark means opational
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
}

model User {
  id       Int     @default(autoincrement()) @id
  email    String  @unique
  name     String?
  password String
  posts    Post[]
}

code ./prisma/.env

DATABASE_URL=postgresql://USER:PASSWORD@HOST:PORT/DATABASE

Prisma Migrate:

npx prisma migrate save --name init --experimental npx prisma migrate up --experimental npx prisma generate

B. Build server

npm i graphql-yoga @prisma/client code index.js

const { PrismaClient } = require('@prisma/client')
const prisma = new PrismaClient()
const { GraphQLServer } = require('graphql-yoga')

const Query = require('./resolvers/query.js')
const Mutation = require('./resolvers/mutation.js')
const User = require('./resolvers/user.js')
const Post = require('./resolvers/post.js')

const resolvers = {
  Query,
  Mutation,
  User,
  Post
}

const server = new GraphQLServer({
  typeDefs: './schema.graphql',
  resolvers,
  context: request => {
    return {
      ...request,
      prisma,
    }
  },
})

const PORT = process.env.PORT || 4000
server.start(PORT, () => console.log(`Server is running on http://localhost:4000`))

The typeDefs connect to the schema wrote at the t section. It defined the database path, data type, and the relation between them.
The resolvers defined how to deal with data in each relevant script. For example, Query responsible for fetching data, Mutation for CRUD/ Signup/Login function, we will deal with it later. The rest two (User and Post in resolvers field) define data relations.
The context contains custom data being passed through your resolver chain.

C. Build typeDefs, resolvers, and user identification

define typeDefs code schema.graphql

type Query {
  info: [Post!]!
}

type Mutation {
  upsertPost (postId:ID!, title: String!, content: String): Post!
  deletePost (postId:ID!): Post

  signup(email: String!, password: String!, name: String!): AuthPayload
  login(email: String!, password: String!): AuthPayload
}

type Post {
  id: ID!
  title: String!
  content: String
  author:    User
  createdAt: String!
}

type AuthPayload {
  token: String
  user: User
}

type User {
  id: ID!
  name: String
  email: String!
  posts: [Post]
}

define resolvers

npm i jsonwebtoken bcryptjs dotenv
mkdir resolvers
code ./resolvers/query.js

const { getUserId } = require('../utils')

function info(parent, args, context, info) {
  const userId = getUserId(context)
  const Posts = context.prisma.post.findMany({
    where: {
      authorId: parseInt(userId)
    }
  })

  return Posts
}


module.exports = {
  info
}

code ./resolvers/mutation.js

const { getUserId } = require('../utils')
const bcrypt = require('bcryptjs')
const jwt = require('jsonwebtoken')
require('dotenv').config()
const APP_SECRET = process.env.APP_SECRET

function upsertPost(parent, args, context, info) {
  const userId = getUserId(context)
  const upsertPost = context.prisma.post.upsert({
    where: {
      id: parseInt(args.postId)
    },
    update: {
      title: args.title,
      content: args.content,
    },
    create: {
      title: args.title,
      content: args.content,
      author: {
        connect: { id: parseInt(userId) },
      },
    },
  })

  return upsertPost
}


function deletePost(parent, args, context, info) {
  const deletePost = context.prisma.post.delete({

    where: {
      id: parseInt(args.postId),
    },
  })

  return deletePost
}

async function signup(parent, args, context, info) {
  const password = await bcrypt.hash(args.password, 10)
  const user = await context.prisma.user.create({ data: { ...args, password } })
  const token = jwt.sign({ userId: user.id }, APP_SECRET)

  return {
    token,
    user,
  }
}

async function login(parent, args, context, info) {
  const user = await context.prisma.user.findOne({ where: { email: args.email } })
  if (!user) {
    throw new Error('No such user found')
  }
  const valid = await bcrypt.compare(args.password, user.password)
  if (!valid) {
    throw new Error('Invalid password')
  }
  const token = jwt.sign({ userId: user.id }, APP_SECRET)

  return {
    token,
    user,
  }
}

module.exports = {
  upsertPost,
  deletePost,

  signup,
  login,
}

code ./resolvers/user.js

function posts(parent, args, context) {
  return context.prisma.user.findOne({ where: { id: parent.id } }).posts()
}

module.exports = {
  posts,
}

code ./resolvers/post.js

function author(parent, args, context) {
  return context.prisma.post.findOne({ where: { id: parent.id } }).author()
}

module.exports = {
  author,
}

The four scrips function have short explained on the above second item (The resolvers).

Build a helper to handle user identification code utils.js

const jwt = require('jsonwebtoken')
require('dotenv').config()
const APP_SECRET = process.env.APP_SECRET

function getUserId(context) {
  const Authorization = context.request.get('Authorization')
  if (Authorization) {
    const token = Authorization.replace('Bearer ', '')
    const { userId } = jwt.verify(token, APP_SECRET)
    return userId
  }

  throw new Error('Not authenticated')
}

module.exports = {
  getUserId,
}

code .env

APP_SECRET = Your_APP_SECRET

D. Start GraphQL server

node index.js

you could try the following command on GraphQL left column

signup

mutation {
  signup(
    name: "__yourname__"
    email: "__your@email.com__"
    password: "__yourpassword__"
  ) {
    token
    user {
      id
    }
  }
}

login

mutation {
  login(
    email: "__your@email.com__"
    password: "__yourpassword__"
  ) {
    token
    user {
      id
      name
      posts{
        id
        title
      }
    }
  }
}

add todo

a. copy token to Header(bottom left)

{ "Authorization": "Bearer __Token__" }

b. command

mutation {
  upsertPost(
    postId:"0"
    title: "www.graphqlconf.org"
  ) {
    id
    titile
  }
}

delete todo

mutation {
  deletePost(
    postId:"__Id__" //enter todo id
  ) {
    id
  }
}