Question

我在继电器的学习过程中遇到了非常严重的问题。如果我使用片段扩展运算符（实际数据从graphql返回，从网络选项卡确认），则Relay不会从网络响应返回数据。但是，如果我在查询本身中定义字段要求，它将返回数据。

这是应用的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())
})

graphql schema：

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时获得的回复：

请帮助我理解我在这里失踪的地方。提前谢谢。

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

中继片段传播不起作用

1 个答案: