chat app #3b - menghubungkan UI dengan graphql API

1. install recoil

npm install recoil

2. src/recoil.js

import { atom } from "recoil";

export const selectedUserState = atom({
  key: "selectedUser",
  default: null,
});

3. src/pages/Main/Message/index.js

  setTimeout(() => {
    const cb = document.getElementById("chat-content").parentElement;
    if (cb) {
      cb.scrollTop = cb.scrollHeight;
    }
  }, 200);

4. updated query (src/pages/Main/Message/index.js)

  subscription MyQuery($where: messages_bool_exp = {}) {
    messages(where: $where, order_by: { createdAt: asc }) {
      id
      fromUserId
      message
      fromUser {
        name
        picture
      }
      createdAt
    }
  }

5. update variable params (src/pages/Main/Message/index.js)

  let params = { where: {} };
  if (selectedUser && !selectedUser.id) {
    params.where = {
      toUserId: {
        _is_null: true,
      },
    };
  } else if (selectedUser && selectedUser.id) {
    params.where = {
      _or: [
        {
          fromUserId: {
            _eq: user.sub,
          },
          toUserId: {
            _eq: selectedUser.id,
          },
        },
        {
          fromUserId: {
            _eq: selectedUser.id,
          },
          toUserId: {
            _eq: user.sub,
          },
        },
      ],
    };
  }

6. update query untuk contact list (src/pages/Main/Contact/index.js)

query MyQuery(
    $order_by: [users_order_by!] = { name: desc }
    $_neq: String = ""
  ) {
    users(order_by: $order_by, where: { id: { _neq: $_neq } }) {
      id
      name
      picture
    }
  }

7. install env-cmd & update package.json

npm install env-cmd

"build:prod": "env-cmd -f .env.prod npm run-script build"