javascript – 接力现代,道具未提供

2023年1月24日 201次阅读

我正在从我的服务器正确地获取数据,但我得到一个道具没有提供错误.

~ expected prop `query` to be supplied to `Relay(ContactsPage)`, but got `undefined`.

有以下几点.

import makeRouteConfig from 'found/lib/makeRouteConfig';
import Route from 'found/lib/Route';
import React from 'react';
import { graphql } from 'react-relay';

import ContactsPage from '../components/ContactsPage';

export default makeRouteConfig(
    <Route
      path="/contacts"
      Component={ContactsPage}
      prepareVariables={ (params) => ({
        ...params,
        count: 5,
        order: "title",
        postType: ['mp_contact'],
      })}
      query={graphql`
        query contacts_WPQuery_Query(
          $count: Int!
          $order: String!
          $cursor: String
          $categoryName: String
          $postType: [String]
        ) {
            ...ContactsPage_query
        }
      `}
    />
);

我可以看到数据是从服务器获取的.

《javascript – 接力现代,道具未提供》

我有其他组件遵循类似的模式：
这是ContactsPage组件

import React, { Component } from 'react'
import ContactsList from './ContactsList'
import { createFragmentContainer, graphql } from 'react-relay'

class ContactsPage extends Component {

  render() {
    const {query} = this.props
    return (
      <div>
        <ContactsList wp_query={query.wp_query} />
      </div>
    )
  }
}

export default createFragmentContainer(
  ContactsPage,
  {
    query: graphql`
      fragment ContactsPage_query on Query {
          wp_query {
            id
            ...ContactsList_wp_query
          }
      }
    `
  }
)

最佳答案 我能够通过在查询{}下更改嵌套根查询来解决这个问题

query={graphql`
        query contacts_WPQuery_Query(
          $count: Int!
          $order: String!
          $cursor: String
          $categoryName: String
          $postType: [String]
        ) {
            query {
               ...ContactsPage_query
            }
        }
      `}

我需要更新我的graphql服务器以将查询节点嵌套一层深度(我认为这在Relay Modern中不是必需的.但似乎是.也许这是Found路由库的约束.我不确定.

点赞