标签: relaymodern

我在Relay Modern中设置refetchContainer时遇到了一些问题.父组件是QueryRenderer,它运行初始查询,适当地填充子组件的道具(a-prop-riately？eh？eh？!).refetchContainer指定我们所有的变量,并在输入字段的onChange事件上,使用新变量重新运行查询.这一切都很完美,除了孩子的道具永远不会更新收到的新数据.我可以向下钻取Relay存储,看到确实收到了带有适当数据的查询.我已经对这个问题感到震惊了一段时间,我会感激一些帮助.可能是我想念的简单事情.Lord知道Relay Modern文档很少.

我已经四处寻找,找不到合适的解决方案.这家伙似乎遇到了类似的问题: 继电器重新提取没有显示结果

QueryRenderer的父组件:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { graphql, QueryRenderer } from 'react-relay';
import Search from './Search';

const propTypes = {
  auth: PropTypes.object.isRequired,
};

class SearchContainer extends Component {
  render() {
    return (
      <QueryRenderer
        query={graphql`
          query SearchContainerQuery($search: String!){
            users: searchUsers(search:$search, first:10){
              ...Search_users
            }
          }`}
        variables={{ search: 'someDefaultSearch' }}
        environment={this.props.auth.environment}
        render={({ error, props }) => {
          if (error) {
            console.log(error);
          }
          if (props) { …

我正在使用Relay Modern(compat).我有一个片段,其中包含一个具有一个参数的字段,但我找不到从父组件传递变量值的方法:

// MyFragmentComponent.jsx

class MyFragmentComponent extends Component {...}

const fragments = {
  employee: graphql`
    fragment MyFragmentComponent_employee on Employee {
      hoursWorked(includeOvertime: $includeOvertime)
      dob
      fullName
      id
    }
  `,
}

export default Relay.createFragmentContainer(MyFragmentComponent, fragments)

它最终会说$includeOvertime没有定义.渲染此组件的上下文如下所示:

// MyRootComponent.jsx

class MyRootComponent extends Component {
  render() {
    const { employee } = this.props
    const includeOvertime = //... value is available here

    return (
      <div>
        <MyFragmentComponent employee={employee} />
      </div>
    )
  }
}

const query = graphql`
  query MyRootComponentQuery($employeeId: String!) {
    employee(id: $employeeId) …

我开始使用带有反应继电器的graphQl.我遵循了一些教程,我可以在突变和查询的帮助下获取和发布.一切正常,但我的问题是,

• qraphql正在保存数据并为我们提取数据

例如:如果我从数据库中获取数据,我可以进入特定的DB/TABLE.同样,我想知道graphql存储数据的位置.

我搜索了许多网站,他们正在告诉如何使用qraphql,但我无法找到我的问题的答案.我需要澄清这方面的问题.有人可以帮我解决这个问题.

我试图测试反应继电器现代容器,但我遇到了这个问题.

TypeError: Cannot read property 'environment' of undefined

这是测试代码:

test('render component', () => {
  const tree = renderer.create(
    <User />,
  ).toJSON();

  expect(tree).toMatchSnapshot();
});

目标：

我正在尝试使用中继从GraphQL 服务器查询特定字符。

问题：

该查询在 GraphiQL 中运行。但在这里，当我跑步时，"relay-compiler": "^1.4.1"我得到...

错误：解析错误：错误：FindGraphQLTags：graphql 标记中的操作名称必须以模块名称为前缀，并以“Mutation”、“Query”或“Subscription”结尾。进入clientQuery模块Jedi。在“组件/Jedi.js”中

问题：

我不能像在 GraphiQL 中那样查询特定字符吗？我怎样才能实现这个目标？

代码：

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

const BlogPostPreview = props => {
 return (
   <div key={props.post.id}>{props.post.name}</div>
 )
}

export default QueryRenderer(BlogPostPreview, {
post: graphql`
         query clientQuery {
           character(id: 1000) {
             id
             name
             appearsIn
          }
        }
    `
})

我是 graphql 的新手。我需要在 React 应用程序中使用 Relay Modern 执行突变。根据文档，突变有效负载可能与成功响应到错误响应不同。成功响应一切顺利，但错误响应我在控制台中收到此警告：

警告：RelayResponseNormalizer：有效负载不包含字段 的值objectId: objectId。检查您是否使用与获取有效负载相同的查询进行解析。

因为错误响应不包含 objectId 字段。除此之外，脚本行为正确。以下是文档中的一些示例.. 突变示例：

mutation{
    createObject(name: 'john') {
        objectId
        error
    }
}

成功响应：

{
    "data": {
        "createObject": {
            "objectId": "123456",
            "error": null
        }
    }
}

和错误响应：

{
    "data": {
        "createObject": {
            "error": "[Name should not be Empty]"
        }
    }
}

这是反应组件中的代码：

const mutation = graphql`
    mutation ComponentCreateObjectMutation($name: String) {
        createObject(name: $name) {
            objectId
            error
        }
    }
`;

commitMutation(
    environment,
    {
        mutation,
        variables,
        onCompleted: (response, errors) => { …

我正在努力解决反应路由器和中继集成问题。

到目前为止，我坚持这个例子

它使用useLazyLoadQuery钩子，虽然一切似乎都工作得很好，但我还看到了另一种方法：usePreloadedQuery。

文档说useLazyLoadQuery钩子

如果不小心使用，可能会触发多个嵌套或瀑布式往返，并等到渲染开始数据获取（通常可以比渲染早得多开始），从而降低性能。相反，更喜欢 usePreloadedQuery。

然而，目前尚不清楚如何将其与react-router集成，显然，我不想重新发明我自己的路由器......

我注意到的另一件事是usePreloadedQuery应该与 ; 结合使用 useQueryLoader。同时在文档中，他们只需调用即可直接加载它loadQuery()；

所以我不确定哪种方式是首选。

我最终得到了这样的包装：

const WrappedHomePage = () => {
  const [queryRef, loadQuery] = useQueryLoader(HomePageQuery);

  // does calling it like this make any sense at all?
  useMemo(() => {
    loadQuery();
  }, [loadQuery]);

  return <HomePage queryRef={queryRef} />;
};

const HomePage = ({ queryRef }) => {
  const query = usePreloadedQuery(
    graphql`
      query HomePageQuery {
        ...HomePageContainer_repository
      }
    `,
    queryRef
  );

  return …

我在项目上与 Relay Modern 合作。但是当我将片段放置到放置组件的位置时，我不确定如何从某个位置发送数据。

例如：

这是组件组合

-Page (QueryRenderer)
---Header
---body
  ---List
     --UserAutocomplete

列表是片段，像 fragment PaymentsList on Payment UserAutocomplete 也是片段，但在 RootQuery 上fragment UserAutocomplete_users on RootQuery

实际上，我将这个片段放在查询 QueryRenderer 中 graphql` query PaymentQuery { ...PaymentsList ...UserAutocompleteFragment_users }

但是后来我在这里获得了 UserAutocomplete 的数据，我必须通过 props 向下发送 UserAtocomplete 组件的这些数据。有没有更好的方法，比如从商店获取这些数据而不是通过道具发送它们？

我正在使用一个带有接力现代的反应原生应用程序.

目前我们的应用程序的fetchQuery实现,只是在网络上进行提取(如https://facebook.github.io/relay/docs/en/network-layer.html),

虽然有可能是另一个本地网络层,如https://github.com/relay-tools/relay-local-schema,它返回来自本地数据库的数据,如sqlite/realm.

有没有办法从本地网络层设置离线优先响应,然后自动请求到真实网络,它还用更新的数据填充存储(以及写入本地数据库)？还应该/他们可以共享同一家商店吗？

根据Network.create()的要求,它应该返回包含有效负载的promise,似乎没有可能返回多个值.

任何想法/帮助/建议表示赞赏.

我的应用程序看起来类似于下面的代码片段。

（我遗漏了很多实现细节，希望下面的代码足以解决我的问题）。

SampleApp.js

const SampleAppQuery = graphql`
  list SampleAppQuery {
    ...ItemComponent_item
  }
`

function SampleApp() {
  return (
    <QueryRenderer
      environment={environment}
      query={SampleAppQuery}
      render={(error, props) => {
        if (props) {
          return <AppRefetchContainer list={props} />
        }
      }}
    />
  )
}

AppRefetchContainer.js

class AppRefetchContainer extends Component {
  render() {
    <div>
      <HeaderComponent refetchList={this._refetchList} />
      {list.map(item => <ItemComponent item={item} />)}
    </div>
  }

  _refetchList(params) {
    this.props.relay.refetch(params)
  }
}

export default createRefetchContainer(
  AppRefetchContainer,
  graphql`
    fragment AppRefetchContainer_list on Item {
      ...ItemComponent_item
    }
  `,
  graphql`
    query AppRefetchContainerQuery($sortBy: String!)
    list SampleAppQuery(sortBy: …