Загрузка текста, отображаемого при получении запросов на нумерацию страниц - PullRequest
Новая
       30

Загрузка текста, отображаемого при получении запросов на нумерацию страниц

0 голосов
/ 04 марта 2019

У меня есть компонент реагирования, использующий реагирующее-аполлонное извлечение списка.Сервер использует соединение в стиле ретрансляции.

У меня вопрос, когда я выбираю следующую страницу, на ней отображается «Загрузка ...», а затем курсор страницы перемещается обратно наверх, как показано ниже.

https://imgur.com/a/ImfQPVJ

Я хочу иметь лучший UX, чтобы не отображался текст "Загрузка ...", и после выборки просто добавьте полученный результат в конец списка.

Этокод (удалите нерелевантный код): 

class Links extends Component {
  fetchNextPage = (pageInfo, fetchMore) => ev => {
    const { linksOrder } = this.props;
    const after = pageInfo.endCursor;
    const queryVars = getQueryVarsFromParam(linksOrder, after);

    fetchMore({
      variables: queryVars,
      updateQuery: (previousResult, { fetchMoreResult }) => {
        const { allLinks: { nodes: newLinks, pageInfo: newPageInfo }} = fetchMoreResult;
        // Handle no new result
        if (newLinks.length === 0) return previousResult;

        // With new result, we append to the previous result list
        let finalResult = previousResult;
        finalResult.allLinks.pageInfo = newPageInfo;
        finalResult.allLinks.nodes = finalResult.allLinks.nodes.concat(newLinks);

        return finalResult;
      }
    })
  }

  render() {
    const { linksOrder, classes } = this.props;
    const { linkGqlCursorAfter: after } = this.state;
    const queryVars = getQueryVarsFromParam(linksOrder, after);

    return(<Query query={LINKS_QUERY_GQL} variables={queryVars}>
      {({ loading, error, data, fetchMore }) => {
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error :(</p>;

        const { allLinks: { nodes: links, pageInfo }} = data;
        return(
          <React.Fragment>
            <Grid container spacing={8} className={ classes.linksList } >

              { links.map((link, ind) => (
                <Grid item key={link.id}><Link ind={ind} link={link}/></Grid>
              )) }

              { pageInfo.hasNextPage ? (
                <Grid item key={ "fetchNextPage" } style={{ alignSelf: "center" }}>
                  <Fab onClick={ this.fetchNextPage(pageInfo, fetchMore) }
                    size="small" color="secondary"><AddIcon /></Fab>
                </Grid>)
                : null }

            </Grid>
          </React.Fragment>
        )
      } }
    </Query>)
  }
}

Как мне этого добиться?Другой подход, который я мог бы придумать, - это вообще не использовать тег <Query>, а извлекать самого клиента Apollo через HOC в инструменте onClick, извлекать результат и добавлять результат обратно в объект links путем обновления состояния компонента.

Тогда возникает вопрос, почему мы хотим использовать <Query> <Mutation>, когда мы всегда можем получить клиент Apollo и лучше справиться с взаимодействием запросов?

1 Ответ

0 голосов
/ 06 марта 2019

Поскольку у вас уже есть данные, которые вы извлекли с предыдущих страниц в вашем кэше, вы можете сделать это условно в своем if (загрузке), ожидая получения новых данных. 

if(loading) {
    return data.allLinks ? 
       <> 
           <LinksComponent {/*pass in the old data here...*/}/>
           <Spinner/>
       </> : <Spinner/>
}

Если у вас уже естьdata.allLinks вы будете отображать эти данные в LinksComponent даже при получении новых данных.Компонент Spinner будет отображаться под LinksComponent, пока загрузка имеет значение true.Если данные не извлечены, вы просто отобразите компонент Spinner.

...