根据来自初始查询的数据触发第二个GraphQL查询 [英] Triggering a second GraphQL query based on data from initial query

问题描述

概述

最初加载WrappedApp时，会将查询发送到GraphQL API以获取数据(标签).

When WrappedApp initially loads, a query is sent to the GraphQL API to fetch the data (Tags).

完成此操作后，用户可以通过单击TagsList中的标签将项目添加到WrappedApp中的ShortList中(请参见下面的屏幕截图).

After this has completed a user can add an item to the ShortList in WrappedApp by clicking on a Tag in the TagsList (see screenshot below).

问题

如何在TagsList中单击标签(即在下面的示例中单击了安全性)以触发第二个名为GQLSIMILARTAGS的GraphQL查询，并将结果呈现在ShortList组件数据上方或在至少console.log GQLSIMILARTAGS查询的结果? GQLSIMILARTAGS接受一个变量，该变量将是被单击并添加到ShortList的标签.

How can I get this click of a Tag in the TagsList (i.e. security was clicked in the example below) to trigger the second GraphQL query named GQLSIMILARTAGS and render the result above the ShortList components data or at least console.log the result of the GQLSIMILARTAGS query? GQLSIMILARTAGS accepts a variable which would be the Tag that was clicked and added to ShortList.

我尝试了什么?

我尝试修改WrappedApp中的addFavourite函数以使用带有useQuery(GQLSIMILARTAGS)的新GQLSIMILARTAGS查询来调用GQLFunc，但这可能不是最好的方法.

I tried modifying the addFavourite function in WrappedApp to call GQLFunc with the new GQLSIMILARTAGS query with useQuery(GQLSIMILARTAGS) but this may not be the best approach.

这是Apollo GraphQL查询代码.

This is the Apollo GraphQL query code.

graphclient.js




const client = new ApolloClient({
  uri: "https://xxxx.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 {
    tag(
      where: { tag_related_counts: { search_label: { _eq: "security" } } }
      distinct_on: id
    ) {
      label
      tag_related_counts {
        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 };

这是主要的WrappedApp.js应用程序(根据@xadm反馈已更新为功能组件).

This is the main WrappedApp.js App (edit: Updated to function component as per @xadm feedback).

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

  // update filterText in state when user types
  const filterUpdate = (value) => {
    setfilterText(value);
  };

  // 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) => {
    //console.log(id);
    const newList = [...favourites.slice(0, id), ...favourites.slice(id + 1)];
    setFavourites(newList);
  };

  const hasSearch = filterText.length > 0;
  return (
    <div>
      {GQLSimilarFunc()}
      <header>
        <Greeting />
        <Search filterVal={filterText} filterUpdate={filterUpdate} />
      </header>
      <main>
        <ShortList
          data={props.data}
          favourites={favourites}
          simfunc={GQLSimilarFunc}
        />

        <TagsList
          data={props.data}
          filter={filterText}
          favourites={favourites}
          addFavourite={addFavourite}
        />
        {/* 
            Show only if user has typed in search.
            To reset the input field, we pass an 
            empty value to the filterUpdate method
          */}
        {hasSearch && (
          <button onClick={() => filterUpdate("")}> Clear Search</button>
        )}
      </main>
    </div>
  );
}

export default WrappedApp;

WrappedApp

import React, { Component, useState } from "react";
import { GQLSimilarFunc } 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>
);


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

const ShortList = ({ favourites, data, simfunc }) => {
  const hasFavourites = favourites.length > 0;
  const favList = favourites.map((fav, i) => {
    console.log(data.find((tag) => tag.id === fav).label);
    return (
      <Tag
        id={i}
        key={i}
        info={data.find((tag) => tag.id === fav)}
        //handleFavourite={(id) => deleteFavourite(id)}
        handleFavourite={() => simfunc()}
        /*handleFavourite={GQLSimilarFunc(
          data.find((tag) => tag.id === fav).label
        )}*/
      />
    );
  });
  //console.log(data.find((tag) => tag.id === 4436));

  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, filter, favourites, addFavourite }) => {
  const input = filter;

  // Gather list of tags
  const tags = data
    // filtering out the tags that...
    .filter((tag, i) => {
      return (
        // ...are already favourited
        favourites.indexOf(tag.id) === -1 &&
        // ...are not matching the current search value
        !tag.label.indexOf(input)
      );
    })
    // ...output a <Name /> component for each name
    .map((tag, i) => {
      //console.log(tag.label);
      // only display tags that match current input string
      return (
        <Tag
          id={tag.id}
          key={i}
          info={tag}
          handleFavourite={(id) => addFavourite(id)}
        />
      );
    });

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

/* ###################### */
/* ##### Search bar ##### */
/* ###################### */

// need a component class here
// since we are using `refs`
class Search extends Component {
  render() {
    const { filterVal, filterUpdate } = this.props;
    return (
      <form>
        <input
          type="text"
          ref="filterInput"
          placeholder="Type to filter.."
          // binding the input value to state
          value={filterVal}
          onChange={() => {
            filterUpdate(this.refs.filterInput.value);
          }}
        />
      </form>
    );
  }
}

这是我的index.js

import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import { ApolloProvider } from "@apollo/react-hooks";
import { client, GQLTags, GQLFunc } from "./graphclient";
import WrappedApp from "./WrappedApp";

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

ReactDOM.render(
  <ApolloProvider client={client}>
    <GQLFunc callingApp={WrappedApp} />
  </ApolloProvider>,
  document.getElementById("root")
);

推荐答案

它可以很简单

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} />;
  if (data) return <GQLChild dataTag={data.tag} callingApp={props.callingApp} />;
}

function GQLChild(props) {
  const { loading, error, data } = useQuery(GQLSIMILARTAGS, {
    variables: {
      someSimilarRequiredVariableFromTagQueryResult: props.dataTag.something
    }
  });

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

  let CallingApp = props.callingApp;
  // pass data separately or combine into one `data` prop
  if (data) return <CallingApp dataSimilar={data} dataTag={props.dataTag} />;
}

这篇关于根据来自初始查询的数据触发第二个GraphQL查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！