如何将一个组件中查询到的数据传递给另一个组件作为查询变量？

Question

我一直在尝试将一个路由组件中使用 Apollo Client 查询的值传递给另一个路由组件以用作查询中的变量。确切的错误是："Uncaught TypeError: Cannot read property 'name' of undefined".

包含三个组成部分：

App，路由器的根组件。
ComponentA，通过id和name查询一组数据，显示每一项的卡片列表。每个项目都有一个 link 到 ComponentB.
组件 B，它必须使用组件 A 引用的名称作为变量来查询更多数据，以显示该项目的更多数据。

App.tsx

export const App: React.FunctionComponent = () => {
  return (
    <BrowserRouter>
      <>
        <Main>
          <Switch>
            <Route exact path="/" component={ComponentA} />
            <Route path="/:name" component={ComponentB} />
          </Switch>
        </Main>
      </>
    </BrowserRouter>
  );
};

ComponentA.tsx

const GET_DATAS = gql`
  query GetDatas {
    getDatas {
      _id
      name
    }
  }
`;

interface Data {
  _id: string;
  name: string;
}

export const Home: React.FunctionComponent = () => {
  const { data } = useQuery(GET_DATAS);

  return (
    <>
      <div>
        {data.getDatas.map((data: Data) => (
          <Link to={`/${data.name}`} key={data._id}>
            <Card name={data.name} />
          </Link>
        ))}
      </div>
    </>
  );
};

ComponentB.tsx

const GET_DATA = gql`
  query GetData($name: String!) {
    getData(name: $name) {
      _id
      name
      year
      color
    }
  }
`;

interface Props {
  name: string;
}

export const DataDetails: React.FunctionComponent<Props> = (props: Props) => {
  const { data } = useQuery(GET_DATA, {
    variables: { name },
  });

  return (
    <>
      <div>
        <H1>{data.getData.name}</H1>
        <p>{data.getData.year}</p>
        <p>{data.getData.color}</p>
      </div>
    </>
  );
};

查询在 Playground 中测试时运行良好，我尝试使用本地状态并使用 Link 传递道具但没有结果，但我仍然无法弄清楚如何将值传递给在ComponentB的查询中使用。

提前致谢！

Answer 1

已修复，我最终选择只获取 URL，稍微清理一下，并将其用作查询的变量，同时添加加载和错误状态：

export const DataDetails: React.FunctionComponent = () => {
  const dirtyPath = location.pathname;
  const cleanPath = dirtyPath.replace(/%20/g, ' ').replace(/\//g, '');

  const { data, loading, error } = useQuery(GET_DATA, {
    variables: { name: cleanPath },
  });

  return (
    ...
  );
};

使用 React Router 时可用的另一种解决方案是：

export const DataDetails: React.FunctionComponent = (props) => {
  const { data, loading, error } = useQuery(GET_DATA, {
    variables: { name: props.match.params.name },
  });

  return (
    ...
  );
};

如何将一个组件中查询到的数据传递给另一个组件作为查询变量？

How to pass data queried in one component to another component to use as a query variable?

reactjs

react-router

apollo

react-apollo

apollo-client