Graphql 订阅未获取客户端变量

Posted 2023-03-08

【中文标题】Graphql 订阅未获取客户端变量

【英文标题】：Graphql subscription not getting client-side variables

【发布时间】：2021-07-28 02:27:36

【问题描述】：

我正在尝试使用 apollo-client useSubscription hook 订阅 graphql-yoga 订阅

import React from 'react';
import useSubscription,gql from '@apollo/client';

const SUB_NEW_MSG = gql`
    subscription SUB_NEW_MSG($chatRoom:ID!)
    
        newMessage(chatRoom:$chatRoom)
    `;


function NewMsg()

    const  loading,error,data  = useSubscription(SUB_NEW_MSG,
        variables:
            chatRoom: "608851227be4796a8463607a",
        ,
    );
    
    if(loading) return <p>loading...</p>;
    if(error) return <p>error</p>;
    
    console.log(data);
    return <h4>New Message:data.newMessage</h4>;

Network Status

但是给出了一个错误- 错误：对象作为 React 子项无效（发现：错误：未提供所需类型“ID！”的变量“$chatRoom”。）。如果您打算渲染一组子项，请改用数组。

后端的架构是

type Subscription
    newMessage(chatRoom: ID!): String!

解析器是

const  pubsub  = require("../helper");
const  withFilter  = require("graphql-yoga");

module.exports = 
    Subscription: 
        newMessage: 
            subscribe: withFilter(
                () => pubsub.asyncIterator("newMessage"),
                (payload, variables) => 
                    console.log(payload.query, variables, "HALO");
                    return payload.chatRoom === variables.chatRoom;
                
            ),
        ,
    ,
;

但是当我像下面这样传递查询时，没有变量可以使用订阅挂钩。然后它就可以工作了

const SUB_NEW_MSG = gql`
    subscription SUB_NEW_MSG
    
        newMessage(chatRoom:"608851227be4796a8463607a")
    `;

我该怎么办？有什么解决方法吗？

【参考方案1】：

把你的查询改成这个，然后测试一下。

const SUB_NEW_MSG = gql`
  subscription SUB_NEW_MSG($chatRoom: String!) 
    newMessage(chatRoom: $chatRoom)
  
`;