Khắc phục lỗi Apollo Client Devtools không hiển thị trên Chrome dev tools

Sáng nay ngồi mày mò tìm hiểu về Graphql thì mình có cài đặt một extentions có tên là Apollo Client Devtools .Extentions này để anh em có thể xem được các query, mutation hay các dư liệu mà Graphql đang lưu dưới cache... nó thể nói bên redux có Redux Devtools thì bên Graphql có Apollo Client Devtools với điều kiện là anh em đang dùng Apollo để connect tới grapql.

Link tải: Apollo-client-devtools

Thì khi cài extentions Apollo-client-devtools cho chrome hay firefox có thể anh em sẽ gặp trường hợp không thấy nó hiển thị trong Chrome dev tools, mình bị trường hợp trên nên ghi lại nếu anh em nào gặp phải thì có thể đọc qua bài viết này để khắc phục thử nhé.

Nguyên nhân 1: Chưa config connectToDevTools

Khi sử dụng thư viện Apollo Client để connect tới server grapql trên backend thì sẽ có một param config có tên là connectToDevTools thì mặc định nó là false.

const client = new ApolloClient({
  uri: "http://localhost:4000/graphql",
  cache: new InMemoryCache(),
  credentials: "include",
  connectToDevTools: true,
})

Thực ra config này nó không phải kích hoạt Apollo Client Devtools dưới môi trường dev là mà môi trường product, ở môi trường dev thì nó luôn hiển thị Apollo Client Devtools nên config này anh em bật hay không thì cũng không ảnh hưởng đến việc Apollo Client Devtools hiển thị dưới môi trường dev, nên đây chỉ là nguyên nhân cho anh em không thấy nó hiển thị khi deploy thôi.

Nguyên nhân 2: Chưa mở lại tab address

Sau khi cài extentions xong mình hí hửng mở luôn Chrome dev tools lên mà quên mở tab mới nên cũng là nguyên nhân không thấy thằng Apollo Client Devtools nó xuất hiện, vậy nên trình tự như sau:

1. Tắt address url app đang mở
2. Mở lại tab mới truy cập lại url dự án
3. Mở Chrome dev tools lên

Đôi khi mở lại nó vẫn không hiển thị thì anh em làm thêm vài lần như vậy nữa nhé là sẽ thấy, mình phải làm vài 3 lần như vậy mới thấy nó hiển thị ở Chrome dev tools, nếu anh em gặp lỗi này có thể để lại bình luận bên dưới nhé.

Chúc anh em thành công!