javascript - [GraphQL 错误]：消息：无法解构“未定义”或“空”的属性“id”。位置：[object Object]，路径：newMessage

Question

我是 React/Apollo 钩子的新手，我正在尝试练习这个概念以更好地理解它。

所以我尝试使用 React-Native-Gifted-Chat 和 Apollo Client 对其进行测试。

Query 和 Mutation 工作得很好，除了 Subscription。

我在 useEffect() 中注释掉 subscribeToMore() 后的应用程序图像，这是静态数据

我遇到了 useSubscription 钩子的问题，它会卡在加载状态。所以我尝试了一种不同的方法，在 useQuery 钩子中使用 subscribeToMore 方法。

现在问题开始了，我想在有人向聊天室发送消息时更新数据，这是我迄今为止遇到的错误。

[GraphQL 错误]：消息：无法解构id“未定义”或“空”的属性。位置：[对象对象]，路径：newMessage - node_modules/expo/build/environment/muteWarnings.fx.js:18:23 in warn - ... 来自框架内部的另外 17 个堆栈帧

这是我的 React Native 项目的代码

应用程序.js

import React, { Suspense } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NativeRouter, Route, Link } from "react-router-native";
import ApolloClient from 'apollo-boost';

import { ApolloProvider } from '@apollo/react-hooks';

import Home from './screens/ChatScreen';

const client = new ApolloClient({
  uri: 'http://192.168.1.110:4000',
});

export default function App() {

  return (
    <ApolloProvider client={client}>
      <NativeRouter>
          <Route exact path="/" component={Home} />
      </NativeRouter>
    </ApolloProvider>
  )
}

ChatScreen.js

import React, { useState, useEffect, useCallback } from 'react';
import { StyleSheet, Text, View, Platform, KeyboardAvoidingView } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat'
import { gql } from "apollo-boost";
import { useQuery, useMutation, useSubscription } from '@apollo/react-hooks';

const GET_MESSAGES = gql`
    query Messages($roomId: String!){
        getMessages(roomId: $roomId) {
            id
            user_id
            room_id
            parts {
                content
                type
            }
            created_at
            updated_at
        }
    }
`;

const SUBSCRIBE_MESSAGES = gql`
    subscription SubMessage($roomId: String!) {
        newMessage(roomId: $roomId) {
            id
            user_id
            room_id
            parts {
                content
                type
            }
            created_at
            updated_at
        }
    }
`;

const SEND_MESSAGE = gql`
    mutation SendMessage($roomId: String!, $text: String!) {
        sendMessage(room_id:$roomId, text: $text)
    }
`;

export default function ChatScreen() {
    const [messages, setMessages] = useState([]);
    const { loading, data, subscribeToMore } = useQuery(GET_MESSAGES, {
        variables: {
            roomId: "47dfe0eb-2bfb-43ac-bbdb-1c684d16d78a"
        }
    });

    const [addMessage, { data: mutationData }] = useMutation(SEND_MESSAGE);

    useEffect(() => {
        let messageList = [];
        if (data && data.getMessages) {
            data.getMessages.map(message => {
                messageList.push({
                    _id: message.id,
                    text: message.parts[0].content,
                    createdAt: message.created_at,
                    user: {
                        _id: message.user_id,
                        name: message.user_id,
                        avatar: 'https://placeimg.com/140/140/any',
                    },
                })
            })
        }

        setMessages([
            ...messageList
        ]);

        subscribeToMore({
            document: SUBSCRIBE_MESSAGES,
            variables: {
                roomId: "47dfe0eb-2bfb-43ac-bbdb-1c684d16d78a"
            },
            updateQuery: (previousResult, { subscriptionData }) => {
                console.log(subscriptionData)
            }
        });

        }, [data]);

        onSend = (msgs = []) => {

            addMessage({
                variables: {
                    roomId: "47dfe0eb-2bfb-43ac-bbdb-1c684d16d78a",
                    text: msgs[0].text
                }
            });

            setMessages(GiftedChat.append(messages, msgs))
        }

        if (loading) {
            return (
                <View style={styles.container, { justifyContent: 'center', alignItems: 'center'}}>
                    <Text>Loading....</Text>
                </View>
            )
        }

        return (
            <View style={styles.container}>
                <GiftedChat
                    messages={messages}
                    onSend={msg => onSend(msg)}
                    user={{
                        _id: 'test',
                    }}
                />
                {
                    Platform.OS === 'android' && <KeyboardAvoidingView behavior="padding" />
                }
            </View>
        )
    }

const styles = StyleSheet.create({
        container: {
            flex: 1
        },
    });

标签： javascriptreactjsgraphqlreact-apollo-hooks