RelayMutation 期望 prop 是 Relay 获取的数据，向查询添加突变不起作用

Posted 2023-03-08

【中文标题】RelayMutation 期望 prop 是 Relay 获取的数据，向查询添加突变不起作用

【英文标题】：RelayMutation expects prop to be data fetched by Relay, adding mutation to query not working

【发布时间】：2016-10-19 15:04:24

【问题描述】：

我收到错误：

bundle.js:28169 Warning: RelayMutation: Expected prop `group` supplied to `AddBlock` to be data fetched by Relay. This is likely an error unless you are purposely passing in mock data that conforms to the shape of this mutation's fragment.

它可能看起来类似于this question 中描述的问题，但答案（确保将突变添加到初始查询中）对我来说不是一个解决方案。我在原始查询中已经有了突变。

这是我的相关代码：

export class AddBlock extends Relay.Mutation 
    getMutation() 
        return Relay.QL`mutation  addBlock `;
    

    getVariables() 
        return 
            body: this.props.body
        ;
    

    getFatQuery() 
        return Relay.QL`
            fragment on AddBlock 
                newBlockEdge,
                group 
                    blocks
                
            
        `;
    

    getConfigs() 
        return [
            type: 'RANGE_ADD',
            parentName: 'group',
            parentID: this.props.group.id,

            connectionName: 'blocks',
            edgeName: 'newBlockEdge',
            rangeBehaviors: 
                '': 'append',
            ,
        ];
    


    getOptimisticResponse() 
        return 
            newBlockEdge: 
                node: 
                    body: this.props.body
                
            ,
            group: 
                id: this.props.group.id
            
        
    


    static get fragments() 
        return 
            group: () => Relay.QL`
                fragment on GroupNode 
                    id
                
            `,
        
    



class Designer extends React.Component 
    ...

    addToBlocks(blocks) 
        // Create a mutation to save to the blocks.
        Relay.Store.commitUpdate(
            new AddBlock(
                body: blocks[0].block,
                group: this.props.group
            )
        );
    
    ...



Designer = Relay.createContainer(Designer, 
  fragments: 

    group: (Component) => Relay.QL`
      fragment on GroupNode 
        title
        visibility
        blocks(first: 20) 
            edges 
                node 
                    $Block.getFragment('block')
                    $UpdateBlockBodyMutation.getFragment('block')
                    position
                    title
                
            
        
        $AddBlock.getFragment('group')
      
    `,
  
);

我在这里做错了什么？

【问题讨论】：

我认为问题可能是 addToBlocks 函数未绑定到 React 组件。但是，如果是这种情况，您应该会遇到一些其他错误..

@edvinerikson 可悲的是，它似乎是 :( 主 React 组件是 Designer，由 Relay 呈现。所有获取工作都很好。

调用addToBlocks的代码是什么样的？您可以尝试将 ``` static get Fragments() return group: () => Relay.QL fragment on GroupNode id , ``` 更改为 ``` static fragment = group: () => GroupNode 上的 Relay.QL 片段 id , ```

@edvinerikson Aah 调用addToBlocks 的代码是另一个未绑定的组件（弹出窗口）。这可能是个问题吗？

是的，如果没有绑定调用Relay.Store.commitUpdate，this.props.group的组件将是未定义的。你应该这样做：this.addToBlocks.bind(this)，就像使用 React 事件处理程序一样。

【参考方案1】：

我怀疑您的突变片段实际上并没有被使用 - 您应该运行测试以查看如果您将其他字段添加到 AddBlock 片段，您会发现它们没有被请求...？我不是 100% 确定原因（可能与 static get fragments 有关），但不太确定。

一旦你真正使用了你的突变片段，Relay 就不会再抱怨了，因为它会以正确的方式获取数据：D

【讨论】：

这就是问题所在，@nevilles（@edvinerikson 早点找到它也是对的）。很好的发现！所以因为这个 es6 打包/编译的世界对我来说太陌生了，不知道是谁的错。但是，当您在网络上到处搜索 static prop = 的等价物时，您总是会发现这是 ES7 的东西，而它的 es6 版本是 static get fragment() ..，就像很棒的 @loganfsmyth 的回复 ***.com/questions/32420634/… 一样。但显然，对于 Relay 来说，这些并不意味着同样的事情。

这个。对于遇到此问题的任何人，请尝试通过 babel stage-0 插件运行您的代码。 Mutation 类上的 getFragment 似乎不喜欢 static get fragments() ... 定义