Tại sao Apollo/GraphQL trả về một đối tượng không thể mở rộng?

Question

Tôi đang xây dựng một ứng dụng với VueJS và tôi đang sử dụng máy khách Apollo để tìm nạp dữ liệu từ cơ sở dữ liệu thông qua máy chủ GrapgQL. Tôi có mã trông như thế này:

apollo.query({ 
     query, 
     variables 
    }) 
    // context.commit('populateComments', payload) triggers the mutation 
    .then(payload => context.commit('populateComments', payload)) 

Sau đó, trong những đột biến của tôi, tôi đã sau

populateComments: (state, payload) => { 
     state.comments = payload.data.comments 
    } 

Khi tôi cố gắng đẩy đối tượng khác vào mảng bình luận trong đột biến khác tôi nhận được một lỗi mà đọc "Không thể thêm thuộc tính 300, đối tượng không thể mở rộng". Tôi đã phát hiện ra rằng các công việc sau

state.comments = Array.from(payload.data.comments) 

Nhưng .. Tôi không chắc chắn như thế nào có hiệu quả đó là để liên tục sao chép mảng lớn như thế này? Đây có phải là cách ưa thích để làm điều đó không?

Answer 1

Chưa từng làm việc với GraphQL/Apollo, nhưng tôi đoán nó sẽ giữ nguyên nguyên tắc không làm biến đổi dữ liệu, do đó đối tượng không được mở rộng. Những gì bạn có thể làm trong các đột biến của bạn là để gán dữ liệu cho nhà nước như thế này:

Vue.set(state, 'comments', payload.data.comments) 

Điều này sẽ đảm bảo rằng các đối tượng ban đầu sâu sao chép và sau đó cập nhật một cách thân thiện Vue để hỗ trợ khả năng phản ứng. Bạn có thể đọc thêm here.

Answer 2

Tôi đã gặp phải sự cố tương tự.

Điều tôi đã làm là thực hiện _.cloneDeep trước khi gửi dữ liệu đến Vue cam kết.

Answer 3

Giống như bạn và Max Tôi đã phải đối mặt với cùng một vấn đề và giải pháp duy nhất đối với tôi là sao chép các đối tượng trước khi

nếu bạn đang sử dụng Lodash (https://lodash.com/docs/4.17.5#cloneDeep):

const commentsClone = _.cloneDeep(payload.data.comments) 

nếu không (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign):

const commentsClone = Object.assign({}, payload.data.comments);