如何在Relay中将对象列表连接到节点

时间:2017-02-23 14:18:44

标签: node.js reactjs graphql relayjs relay

在GraphQL中,我有以下结构

# represents any node with GlobalIdField
node(id: "uniqueIdOfNode") {

}

# represents actually logged user
viewer {

}

sample MVC app schema中,todos已连接到查看器,因此在查询时,您只能获得属于已登录用户的待办事项。

但是,在我的情况下,我想显示与用户无关的数据。假设数据是类型Country,它是NodeInterfaceType,我想在我要求国家列表的地方进行查询。所以在Relay中,我可以在CountryList上创建片段,然后使用Relay将其传递给React组件。

如果我写的不够清楚,请告诉我,因为我对此感到困惑,我不确定我是否解释得很好。

我在PHP中编写了GraphQL服务器,但代码或提示可以用node.js编写,我也会理解它。

怎么做?

更新

一些代码:

schema.graphql

# A country
type Country implements NodeInterface {
  # The ID of an object
  id: ID!
  countryId: Int
  phonePrefix: String
  name: String
  timezone: String
}

# Representation of date and time in "Y-m-d H:i:s" format
scalar DateTime

interface NodeInterface {
  # The ID of an object
  id: ID!
}

type Query {
  # Fetches an object given its ID
  node(
    # The ID of an object
    id: ID!
  ): NodeInterface
  viewer: User
  countries: [Country]
}

type User implements NodeInterface {
  # The ID of an object
  id: ID!
  username: String
  userId: Int
  lastLoginDateTime: DateTime
}

SampleRoute.js - 用作有人打开React app的第一条路线

import Relay from 'react-relay';

export default class extends Relay.Route {
    static queries = {
        countries: () => Relay.QL`
            query AppHomeRoute { 
                viewer
            }
    `,
    };
    static routeName = 'AppHomeRoute';
}

App.js 我想在Index组件中列出国家/地区列表,理想情况下在App js中我不希望事件通过带有道具的国家/地区但我希望它们位于Index组件中将来重命名为CountryList

import React, { Component } from 'react';
import Relay from 'react-relay';
import Index from './page/index';

import './App.css';

class App extends Component {
  render() {
    console.log(this.props);
    return (
      <Index country={this.props.countries} />
    );
  }
}

export default Relay.createContainer(App, {
  fragments: {
    countries: () => Relay.QL`
    countries {
        ${Index.getFragment('country')}
      }
    }
            // fragment F1 on Country {
            //   ${Index.getFragment('country')}
            // },

        `
  }
});

现在我收到一个错误:

SampleRoute.js:5未捕获错误:GraphQL验证错误``无法在类型“查询”上查询字段“viewer”

我完全不理解,因为当我使用graphiql查询服务器时,它可以正常工作。

查询:

{
  viewer {
    id
    username
  }
  node(id:"dXNlcjo2NjY=") {
    id
    username
  }
  countries {
    name
  }
}

响应:

{
  "data": {
    "viewer": {
      "id": "dXNlcjo2NjY=",
      "username": "Robert"
    },
    "node": {
      "id": "dXNlcjo2NjY=",
      "username": "Robert"
    },
    "countries": [
      {
        "name": "AFGHANISTAN"
      },
      {
        "name": "ALBANIA"
      }, (...)
    ]
   }
}

0 个答案:

没有答案