标签: relaymodern

在此处的中继文档中，它说：

Relay 使用通用的突变模式，其中突变类型的根字段具有单个参数（输入），并且输入和输出都包含用于协调请求和响应的客户端突变标识符。

但在他们提供的示例中，输入和输出分别如下所示：

// IntroducedShipInput
{
  "input": {
    "shipName": "B-Wing",
    "factionId": "1"
  }
}

// IntroducedShipPayload
{
  "introduceShip": {
    "ship": {
      "id": "U2hpcDo5",
      "name": "B-Wing"
    },
    "faction": {
      "name": "Alliance to Restore the Republic"
    }
  }
}

那么client mutation标识符是什么呢？为什么以及如何使用它来协调请求和响应？

我是中继新手，我正在尝试在并发模式下使用中继现代实验。我已经能够使用 Suspense 和 ErrorBoundary 加载节点、边等。我现在正在开发一个用于创建和更新对象的表单。

我不知道如何在创建和编辑案例中使用相同的表单，因为我无法在创建案例中加载片段 - 其中表单字段的初始值设置为默认值。在创建案例中我没有任何东西可以传递给 useFragment 。

如何创建符合表单所需的片段定义的初始值？也许有我不知道的模式。我肯定错过了什么。我不想重复表单 UI 组件。

尝试使用 react 中继，今天遇到了这个问题。这是我到目前为止所做的。

根查询：

query {
  tasks {
    id
    taskName
    taskStatus
    userId
  }
}

反应组件层次结构

App   
 ?--TaskList (props: tasks)
    ?--TaskListItem (props: task)

现在由于托管原则，我知道我必须在每个组件中编写片段来描述它们的数据需求。

任务列表项.js

const TaskListItemContainer = createFragmentContainer(
    TaskListItem,
    graphql`
        fragment TaskListItem_task on task {
            id
            taskName
            taskDone
            authorId
        }
    `
);

任务列表.js

const TaskListContainer = createFragmentContainer(
    TaskList,
    graphql`
        fragment TaskList_tasks on task {
            tasks {
                ...TaskListItem_task
            }
        }
    `
);

应用程序.js

<QueryRenderer
   environment={relayEnvironment}
   query={graphql`
       query AppQuery {
         ...TaskList_tasks
       }
     `
   }

当我运行中继编译器时，出现以下错误。

Fragment "TaskList_tasks" cannot be spread here as …

我正在学习react-relay（v13），并且在使用@refetchable指定分页片段时遇到问题。这是一个非常基本的结构，如果不使用@refetchable，一切都会正常工作（即我可以查询grapql服务器，获取数据，使用Fragment渲染相同的查询/片段而无需分页）

当我在 ProjectsFragment_user 中引入 @refetchable 时，react-relay 编译器给出错误：

[ERROR] \xe2\x9c\x96\xef\xb8\x8e Invalid use of @refetchable on fragment 'ProjectsFragment_user', only supported are fragments on:\n - the Viewer type\n - the Query type\n - the Node interface or types implementing the Node interface\n - @fetchable type\n

现在这很令人困惑，因为 ProjectsFragment_user 的查询如下所示：

// Dashboard.js\nexport const dashboardQuery = graphql`\nquery DashboardQuery ($id: ID) {\n  user (id: $id){\n    id \n    name\n    ...ProjectsFragment_user\n  }\n}\n`;\n// then \nconst  data = useLazyLoadQuery(dashboardQuery, {}, {},);\n\n

//Projects.js defines fragment\n\nconst {data, loadNext} …

我正在使用中继编译器,它不允许我编译具有实现多个接口的类型的模式.我做了一个小测试项目:

的package.json

{
  "scripts": {
    "relay": "relay-compiler --src ./ --schema schema.graphqls"
  },
  "dependencies": {
    "react-relay": "1.5.0"
  },
  "devDependencies": {
    "relay-compiler": "1.5.0"
  }
}

schema.graphqls

interface First {
    a: String
}

interface Second {
    b: String
}

type Something implements First, Second {
    a: String
    b: String
}

test.js

import { graphql } from "react-relay";

graphql`fragment Test_item on Something {
    a
    b
}`;

如果你用npm run relay运行它(在npm install之后),你会得到错误:

Error: Error loading schema. Expected the schema to be a .graphql or a .json …

我有以下简单的Relay Modern代码:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import {
    QueryRenderer,
    graphql
} from 'react-relay'


import environment from '../../../../../environment'

const CompanyItemQuery = graphql`

query CompanyItem_Query {
  node(id: $companyId) {
    id
    ...on Company {
      id
      name
    }
 }
}
`

class CompanyItem extends Component {

    render() {

        return (
                <QueryRenderer
                    environment={environment}
                    query={CompanyItemQuery}
                    variables={{
                        companyId: 'test',
                    }}
                    render={({error, props}) => {
                        <div>
                            <p>Relay loaded {props.name} company</p>
                        </div>
                }}
                />
        );
    }
};

export default CompanyItem;

我试图在运行之前继续编译代码,我收到以下错误:

> …