中继片段传播不起作用

Posted 2023-03-08

【中文标题】中继片段传播不起作用

【英文标题】：relay fragment spread not working

【发布时间】：2018-01-03 18:56:03

【问题描述】：

我正在学习接力并面临一个非常棘手的问题。如果我使用片段扩展运算符，中继不会从网络响应返回数据（实际数据是从 graphql 返回，从网络选项卡确认）。但是如果我在查询本身中定义字段要求，它会返回数据。

这是应用程序的index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import 
  graphql,
  QueryRenderer
 from 'react-relay'
import environment from './relay/environment'
import AllTodo from './components/AllTodo'

const query = graphql`
  query frontendQuery 
    ...AllTodo_todos
  
`

ReactDOM.render(
  <QueryRenderer
    environment=environment
    query=query
    render=( error, props ) => 
      if (error) return <div>error</div>
      else if (props) 
        console.log(props)
        return <AllTodo  ...props  />
      
      else return <div>loading...</div>
    
  />,
  document.getElementById('root')
)

AllTodo组件：

import React,  Component  from 'react'
import  graphql, createFragmentContainer  from 'react-relay'

class AllTodo extends Component 
  render() 
    return (
      <div>
         this.props.todos.map(todo => 
          <div> todo.id   todo.description </div>
        ) 
      </div>
    )
  


export default createFragmentContainer(AllTodo, graphql`
  fragment AllTodo_todos on RootQueryType 
    allTodos 
      id
      description
      complete
    
  
`);

中继environment:

import 
  Environment,
  Network,
  RecordSource,
  Store,
 from 'relay-runtime'
import  BACKEND_URL  from '../../constants'

// a function that fetches the results of an operation (query/mutation/etc)
// and returns its results as a Promise:
function fetchQuery(
  operation,
  variables,
  cacheConfig,
  uploadables,
) 
  return fetch(BACKEND_URL + '/graphql', 
    method: 'POST',
    headers: 
      'content-type': 'application/json'
    ,
    body: JSON.stringify(
      query: operation.text,
      variables,
    ),
  ).then(response => 
    return response.json();
  );


// a network layer from the fetch function
const network = Network.create(fetchQuery);

// export the environment
export default new Environment(
  network: network,
  store: new Store(new RecordSource())
)

graphqlschema:

schema 
  query: RootQueryType
  mutation: RootMutationType


type RootMutationType 
  # Create a new todo item
  createTodo(description: String): Todo

  # Update a todo item
  updateTodo(id: String, description: String, complete: Boolean): Todo

  # Delete a single todo item
  deleteTodo(id: String): Todo


type RootQueryType 
  # List of all todo items
  allTodos: [Todo]

  # A single todo item
  todo(id: String): Todo


# A single todo item
type Todo 
  id: String
  description: String
  complete: Boolean

这是我在console.log(props) 在index.js 上得到的回复：

请帮助我了解我在这里缺少什么。提前致谢。

【问题讨论】：

你的数据库中已经有待办事项了吗？

@AlexAlexeev 是的，如果我执行不带分数的查询，它可以工作！

【参考方案1】：

我遇到了完全相同的问题。基本上，Relay 不知道如何处理在根上散布碎片的查询。

也就是说，您可以尝试将查询重构为

query frontendQuery 
  allTodos 
    ...AllTodo_todos
  

并将您的片段容器重新定义为

export default createFragmentContainer(AllTodo, 
  todos: graphql`
    fragment AllTodo_todos on Todo 
      id
      description
      complete
    
  `
);

就我而言，它甚至更复杂一些，因为我使用的是重新获取容器，而到目前为止我发现的唯一解决方案是将我的字段放在另一个根字段下；老而可靠的viewer

编辑：我找到了一种避免在查看器下移动东西的方法。基本上，您将来自QueryRenderer 的所有数据作为相应容器的道具传递。有想法请看：https://github.com/facebook/relay/issues/1937