将字符串变量prop传递给useQuery函数

Question

概述

App最初查询GraphQL API并使用TagsList呈现“标记”（字符串）。

用户可以单击标签，然后将该标签传递到ShortList并进行渲染。

我想做什么？

我有另一个名为GQLSIMILARTAGS的GraphQL查询，它接受一个字符串变量，并使用useQuery中的GQLFuncSecond进行调用。

我知道查询的工作方式如下，可以使用硬编码searchLabel进行如下称呼：>

<GQLFuncSecond searchLabel={"cloud"} />
问题

[当用户单击data.tag.label中的标签时，如何将字符串（useQuery）传递到此TagsList变量中。

主应用

function WrappedApp(props) {
  const [favourites, setFavourites] = useState([]);

  function GQLFuncSecond(props) {
    const { loading, error, data } = useQuery(GQLSIMILARTAGS, {
      variables: { search_label: props.searchLabel },
    });
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;

    if (data) return <RelatedTagData data={data.tag} />;
  }

  // add clicked name ID to the favourites array
  const addFavourite = (id) => {
    const newSet = favourites.concat([id]);
    setFavourites(newSet);
  };

  // remove ID from the favourites array
  const deleteFavourite = (id) => {
    const newList = [...favourites.slice(0, id), ...favourites.slice(id + 1)];
    setFavourites(newList);
  };

  return (
    <div>
      <main>
        <GQLFuncSecond searchLabel={"cloud"} />
        <ShortList
          data={props.data}
          favourites={favourites}
          deleteFavourite={deleteFavourite}
        />

        <TagsList
          data={props.data}
          favourites={favourites}
          addFavourite={addFavourite}
        />
      </main>
    </div>
  );
}

export default WrappedApp;
组件

import React, { useState } from "react";
import { useQuery } from "@apollo/react-hooks";
import { GQLSIMILARTAGS } from "./graphclient";

/* ##### Single tag ##### */

const Tag = ({ id, info, handleFavourite }) => (
  <li className={info.count} onClick={() => handleFavourite(id)}>
    {info.label} ({info.tag_related_counts_aggregate.aggregate.count})
  </li>
);

const RelatedTagData = ({ data }) => (
  <div>
    <ul>{data[0].tag_related_counts[0].other_label}</ul>
    <ul>{data[0].tag_related_counts[1].other_label}</ul>
    <ul>{data[0].tag_related_counts[2].other_label}</ul>
    <ul>{data[0].tag_related_counts[3].other_label}</ul>text 
  </div>
);

/* ##### Shortlist ##### */

const ShortList = ({ favourites, data, deleteFavourite, GQLFuncSecond }) => {
  const hasFavourites = favourites.length > 0;
  const favList = favourites.map((fav, i) => {
    return (
      <Tag
        id={i}
        key={i}
        info={data.find((tag) => tag.id === fav)}
        handleFavourite={(id) => deleteFavourite(id)}
      />
    );
  });
  return (
    <div className="favourites">
      <h4>
        {hasFavourites
          ? "Shortlist. Click to remove.."
          : "Click on a tag to shortlist it.."}
      </h4>
      <ul>{favList}</ul>
      {hasFavourites && <hr />}
    </div>
  );
};

/* ##### Tag list ##### */

const TagsList = ({ data, addFavourite }) => {
  // Gather list of tags
  const tags = data
    // filtering out the tags that...

    .map((tag, i) => {
      return (
        <Tag
          id={tag.id}
          key={i}
          info={tag}
          handleFavourite={(id) => addFavourite(id)}
        />
      );
    });

  /* ##### the component's output ##### */
  return <ul>{tags}</ul>;
};
GraphQL代码

const client = new ApolloClient({
  uri: "https://job-stats.herokuapp.com/v1/graphql",
});

const GQLTAGS = gql`
  {
    tag(
      order_by: { tag_related_counts_aggregate: { count: desc } }
      where: { label: { _nin: ["None", "null"] } }
    ) {
      id
      label
      tag_related_counts_aggregate {
        aggregate {
          count
        }
      }
    }
  }
`;

const GQLSIMILARTAGS = gql`
  query($search_label: String!) {
    tag(
      where: { tag_related_counts: { search_label: { _eq: $search_label } } }
      distinct_on: id
    ) {
      label
      tag_related_counts(order_by: { count: desc }) {
        count
        other_label
        search_label
      }
    }
  }
`;


function GQLFunc(props) {
  const { loading, error, data } = useQuery(GQLTAGS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  let CallingApp = props.callingApp;
  if (data) return <CallingApp data={data.tag} />;
}
export { client, GQLTAGS, GQLFunc, GQLFuncSecond, GQLSIMILARTAGS };
    

概述应用程序最初查询GraphQL API并使用TagsList呈现“标签”（字符串）。用户可以单击标签，然后将该标签传递到ShortList并进行呈现。我想做什么？我有...

Answer 1

暂时忘记您拥有的东西...