当用户将文本键入输入文本字段时

发布于 2025-02-08 07:03:09 字数 1243 浏览 1 评论 0原文

我正在尝试使用GraphQl和React构建一种自动完成搜索栏。我的问题是：如何设法触发一个函数，即一旦检查输入的长度大于3个字符 - 将一个挂钩从Apollo客户端库（USEQUERY或USELAZYQUERY）调用。认为无法在功能或条件中触发使用量，我读到为此目的是解决方案，但是我没有找到任何情况清楚地暴露出来的示例。

我正在使用的这种方法...

我已经设置了此功能：

const FetchProducts = (input) => {
    
    const [getProducts,{ data, loading, error }] =  useLazyQuery(GET_PRODUCTS_QUERY, {
      variables: {input}
    })

    
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;
  return products.results.map(({ id, name }) => (
    <div key={id}>
      <p>
        {name}
      </p>
    </div>
  ));
  };

我的get_produtcs_query看起来像这样，

const GET_PRODUTCS_QUERY = gql`
query getProducts ($name: String!){
  products( page: 1, filter: { name: $name })  {
    results {
      name,
      id
    }
  }
}
`;

我想触发fetchproducts方法当我的输入文本字段的Te值将具有3个以上的字符时。类似的东西：

const triggerFetch = () => {
  input.length > 3 ? FetchProducts(input) : '';
};

这是我在函数组件上返回的JSX的

<input type="text" onChange={e => setInput(e.target.value), triggerFetch } value={input} placeholder="Search..."/>

块

原文

I'm trying to build a sort of autocomplete searchbar using GraphQL and React.
My question is: how can I manage to trigger a function that -once it checks the length of the input is bigger than 3 characters- calls one the hooks from the apollo client library (useQuery or useLazyQuery). Think that useQuery cannot be triggered inside a function or condition, I've read that for this purpose useLazyQuery can be a solution, but I do not have found any example where this situation was clearly expose.

This kind of approach I'm working on...

I have set up this function:

const FetchProducts = (input) => {
    
    const [getProducts,{ data, loading, error }] =  useLazyQuery(GET_PRODUCTS_QUERY, {
      variables: {input}
    })

    
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;
  return products.results.map(({ id, name }) => (
    <div key={id}>
      <p>
        {name}
      </p>
    </div>
  ));
  };

My GET_PRODUTCS_QUERY look like this

const GET_PRODUTCS_QUERY = gql`
query getProducts ($name: String!){
  products( page: 1, filter: { name: $name })  {
    results {
      name,
      id
    }
  }
}
`;

I would like to trigger FetchProducts method when te value of my input text field will have more than 3 characters.
Something like this:

const triggerFetch = () => {
  input.length > 3 ? FetchProducts(input) : '';
};

This is a chunk from the JSX that I return on the my function component:

<input type="text" onChange={e => setInput(e.target.value), triggerFetch } value={input} placeholder="Search..."/>

I do not see where or how can I call the getProducts() function setup on the useLazyQuery hook

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小嗷兮 2025-02-15 07:03:09

您不需要此代码的懒惰。您可以用懒惰实现它，但是您必须重新编写代码。

const FetchProducts = (input) => {
    
    const { data, loading, error } =  useQuery(GET_PRODUCTS_QUERY, {
      variables: {name: input}
    })

    
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;
  return products.results.map(({ id, name }) => (
    <div key={id}>
      <p>
        {name}
      </p>
    </div>
  ));
  };

You don't need a LazyQuery with this code. You can implement it with a LazyQuery but you'll have to rework your code.

const FetchProducts = (input) => {
    
    const { data, loading, error } =  useQuery(GET_PRODUCTS_QUERY, {
      variables: {name: input}
    })

    
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;
  return products.results.map(({ id, name }) => (
    <div key={id}>
      <p>
        {name}
      </p>
    </div>
  ));
  };

回复收藏 0 原文

~没有更多了~