Question

文件例:

import type {AppQueryType} from  AppQueryType.graphql ;

const React = require( React );

const {graphql, useQueryLoader, usePreloadedQuery} = require( react-relay );

const AppQuery = graphql`
  query AppQuery($id: ID!) {
    user(id: $id) {
      name
    }
  }
`;

type Props = {
  initialQueryRef: PreloadedQuery<AppQueryType>,
};

function NameLoader(props) {
  const [queryReference, loadQuery] = useQueryLoader(
    AppQuery,
    props.initialQueryRef, /* e.g. provided by router */
  );

  return (<>
    <Button
      onClick={() => loadQuery({id:  4 })}
      disabled={queryReference != null}
    >
      Reveal your name!
    </Button>
    <Suspense fallback="Loading...">
      {queryReference != null
        ? <NameDisplay queryReference={queryReference} />
        : null
      }
    </Suspense>
  </>);
}

function NameDisplay({ queryReference }) {
  const data = usePreloadedQuery(AppQuery, queryReference);

  return <h1>{data.user?.name}</h1>;
}

过于复杂。首先,我不想将初步组成部分分成<代码>。姓名:Loader和NameDisplay,这只是因为它方便了Relay。其次,即使我有儿童部分,我也不想把<条码>上载的Quedery列入<条码>,因为它是Relay和简单反应部分的严格范围(即用其他内容取代Relay,将需要编辑所有组成部分,如<条码>。相反,我想通过<条码>props通过正常数据,例如<条码>用户/代码>。

理想的法典如下:

import type {AppQueryType} from  AppQueryType.graphql ;

const React = require( React );

const {graphql, useQueryLoader, usePreloadedQuery} = require( react-relay );

const AppQuery = graphql`
  query AppQuery($id: ID!) {
    user(id: $id) {
      name
    }
  }
`;


function NameLoader(props) {
  const rawUser = useMagic(AppQuery);
  const [ user, setUser ] = toLocalState(rawUser);

  return (<>
    <Button
      onClick={() => loadQuery({id:  4 })}
      disabled={queryReference != null}
    >
      Reveal your name!
    </Button>
    <h1>{user.name}</h1>;
  </>);
}

我的理解是,数据计算是同步的,但并不意味着真实情况在唯一的正确解决办法中表明了这一点。

From the const [ user, setUser ] = toLocalState(rawUser); line, I want to work with the user variable as with normal local state. In this example, I don t care that local changes with user will not reflect on user at server side - when I ll be ready for reflecting, I ll invoke the appropriate mutation.

What will be instead of useMagic and toLocalState?

Answer 1

你似乎希望找到一种方法,在不依赖Relay shooks提供的结构的情况下,以更直接的方式管理从图克勒检索的数据。你们想要将数据转换为更传统的再处理状态模式。虽然这种做法可能无法充分利用Relay的优化,但你可以通过将<条码>使用Lazy Load Query<>条码/代码( h)和当地复读状态结合起来,来完成你重新研究的内容。

在这方面,你如何利用你的榜样来实现这一目标:

import type { AppQueryType } from  AppQueryType.graphql ;
import React, { useState } from  react ;
import { graphql, useLazyLoadQuery } from  react-relay ;

const AppQuery = graphql`
  query AppQuery($id: ID!) {
    user(id: $id) {
      name
    }
  }
`;

function NameLoader() {
  const [userId, setUserId] = useState(null); // User ID state
  const data = useLazyLoadQuery<AppQueryType>(AppQuery, { id: userId });

  return (
    <>
      <Button onClick={() => setUserId( 4 )} disabled={userId != null}>
        Reveal your name!
      </Button>
      {data.user ? <h1>{data.user.name}</h1> : null}
    </>
  );
}

在这种例子中,I ve使用了use LazyLoad Query hook to fetch the data when theuser ID change. 当点击 but子时,更新了<代码>用户Id状态,导致查询用户数据。单列用户数据储存在<代码>数据变量中。

请注意,通过采用这一办法,你不会充分利用Relay的优化,而是提供更为熟悉的React国家管理办法。如果你后来决定更广泛地利用“延迟”优化,那么你可能需要调整其组成部分,以更加密切地遵守《推迟公约》。

友情链接