React-Select с React-Apollo не работает

Мы используем response-select и выбираем элементы по типу пользователя. Я не могу заставить его работать с react-apollo.

Может ли кто-нибудь помочь мне дать рекомендации?

Вот моя неудачная попытка:

class PatientSearchByPhone extends Component {
  updateProp = mobile => {
    if (mobile.length < 10) return;
    this.props.data.refetch({ input: { mobile } });
  };

  render() {
    console.log(this.props.data);
    return <AsyncSelect cacheOptions loadOptions={this.updateProp} />;
  }
}

const FETCH_PATIENT = gql`
  query Patient($input: PatientSearchInput) {
    getPatients(input: $input) {
      id
      first_name
    }
  }
`;
export default graphql(FETCH_PATIENT, {
  options: ({ mobile }) => ({ variables: { input: { mobile } } })
})(PatientSearchByPhone);

Версии:
"react-apollo": "^ 2.1.11",
"react-select": "^ 2.1.0"

Спасибо за ваше время.


reactjs react-select graphql apollo react-apollo
person Nishant    schedule 08.10.2018    source источник
comment
Можете ли вы воспроизвести проблему на образце на codeandbox.io?   -  person trkaplan    schedule 10.10.2018
comment
Вы нашли решение? Я только начал смотреть на эту интеграцию, и мне интересно, как к ней подошли другие.   -  person Allen Fuller    schedule 18.07.2019
comment
@AllenFuller да, я сделал. Позже сегодня позвольте мне создать для вас пример песочницы.   -  person Nishant    schedule 18.07.2019
comment
@AllenFuller добавил ответ.   -  person Nishant    schedule 21.09.2019

Ответы (2)


arrow_upward
15
arrow_downward

Я получил письмо по электронной почте с просьбой ответить на этот вопрос. Это напоминает мне этот комикс XKCD:

«Никогда

Я не помню точное решение, которое я реализовал, поэтому я установил для этого полный пример.

Это приложение (фрагмент кода ниже) запускает поиск, как только вы вводите 4 или более символа в поле ввода (вы должны ввести имя исполнителя. Попробуйте vinci?). Вот код:

import React, { useState } from "react";
import "./App.css";
import AsyncSelect from "react-select/async";
import ApolloClient, { gql } from "apollo-boost";

const client = new ApolloClient({
  uri: "https://metaphysics-production.artsy.net"
});

const fetchArtists = async (input: string, cb: any) => {
  if (input && input.trim().length < 4) {
    return [];
  }
  const res = await client.query({
    query: gql`
      query {
        match_artist(term: "${input}") {
          name
          imageUrl
        }
      }
    `
  });

  if (res.data && res.data.match_artist) {
    return res.data.match_artist.map(
      (a: { name: string; imageUrl: string }) => ({
        label: a.name,
        value: a.imageUrl
      })
    );
  }

  return [];
};

const App: React.FC = () => {
  const [artist, setArtist] = useState({
    label: "No Name",
    value: "https://dummyimage.com/200x200/000/fff&text=No+Artist"
  });
  return (
    <div className="App">
      <header className="App-header">
        <h4>Search artists and their image (type 4 char or more)</h4>
        <AsyncSelect
          loadOptions={fetchArtists}
          onChange={(opt: any) => setArtist(opt)}
          placeholder="Search an Artist"
          className="select"
        />
        <div>
          <img alt={artist.label} src={artist.value} className="aimage" />
        </div>
      </header>
    </div>
  );
};

export default App;

Вы можете клонировать https://github.com/naishe/react-select-apollo его это рабочий пример. Я развернул приложение здесь: https://apollo-select.naishe.in/, может быть поиграть?

person Nishant    schedule 21.09.2019
comment
Это отличный @Nishant - как бы вы подобрали исполнителя на основе id? - person paqash; 03.10.2019
comment
Есть defaultOptions и defaultValue, с которыми можно поиграть. - person Nishant; 03.10.2019
comment
@Nishant Ты спас мне жизнь / работу. Спасибо чувак! ‹3 - person Asamoah; 09.12.2020

arrow_upward
0
arrow_downward

Другой вариант - выполнить запрос graphql вручную, используя client, который предоставляется путем обертывания базового компонента с помощью withApollo.

В приведенном ниже примере у нас есть

  1. BaseComponnent, который отображает компонент AsyncSelect react-select
  2. loadOptionsIndexes, который выполняет асинхронную выборку graphql через client
  3. BaseComponent.propTypes описывает необходимую client опору.
  4. withApollo обертывает базовый компонент, чтобы дать нам фактический компонент, который мы будем использовать в другом месте в приложении реакции.
const BaseComponent = (props) => {
  const loadOptionsIndexes = (inputValue) => {
    let graphqlQueryExpression = {
      query: QUERY_INDEXES,
      variables: {
        name: inputValue
      }
    }

    const transformDataIntoValueLabel = (data) => {
      return data.indexes.indexes.map(ix => { return { value: ix.id, label: ix.name }})
    } 

    return new Promise(resolve => {
      props.client.query(graphqlQueryExpression).then(response => {
        resolve(transformDataIntoValueLabel(response.data))
      })
    });

  }

  return (
    <>
      <div className="chart-buttons-default">
        <div className="select-index-input" style={{width: 400, display: "inline-block"}}>
          <AsyncSelect 
            isMulti={true}
            cacheOptions={true}
            defaultOptions={true}
            loadOptions={loadOptionsIndexes} />
        </div>
      </div>
    </>
  )
}

BaseComponent.propTypes = {
  client: PropTypes.any,
}

const ComplementComponent = withApollo(BaseComponent);

Извините, если пример немного не соответствует действительности - скопируйте и вставьте то, что у меня было, вместо того, чтобы двигаться дальше, не отдавая назад.

person westonplatter    schedule 09.12.2020