reactjs - 中继片段传播不起作用

Question

我正在学习中继并面临一个非常有线的问题。如果我使用片段传播运算符，中继不会从网络响应返回数据(实际数据从 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
    }
  }
`);

中继环境:

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())
})

graphql 模式:

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
}

这是我在 index.js 上 console.log(props) 时得到的响应:

请帮助我了解我在这里缺少的内容。提前致谢。

Answer 1

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

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

query frontendQuery {
  allTodos {
    ...AllTodo_todos
  }
}

并将片段容器重新定义为

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

在我的例子中，它甚至有点复杂，因为我使用的是重新获取容器，到目前为止我找到的唯一解决方案是将我的字段放在另一个根字段下；老而可靠的 viewer

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