Wie die Daten.refetch () - Funktion aus reagieren-apollo-Werke
Auf dem frontend, ich bin mit ReactJS und versuchen, zu bauen-in eine Filter-option, um eine Liste anzuzeigen. Die Listenansicht korrekt abrufen von Daten aus graphql Endpunkt durch die Ausstellung dieser graphql-Abfrage:
query getVideos($filterByBook: ID, $limit: Int!, $after: ID) {
videosQuery(filterByBook: $filterByBook, limit: $limit, after: $after) {
totalCount
edges {
cursor
node {
id
title
ytDefaultThumbnail
}
}
pageInfo {
endCursor
hasNextPage
}
}
}
Auf das erste laden $filterByBook
variable null
, damit die Abfrage richtig gibt alle Seiten für alle Knoten (Abfrage gibt eine paginierte Ergebnis). Dann, indem Sie auf das filter (filter nach Buch) ein weiteres graphql Abfrage ausgibt, aber es gibt immer die gleichen data
. Hier ist ein code-snippet für das filtern Komponente
renderFilters() {
const { listOfBooksWithChapters, refetch } = this.props;
return (
<Row>
<FilterBooks
onBookTitleClickParam={(onBookTitleClickParam) => {
return refetch({
variables: {
limit: 3,
after: 0,
filterByBook: onBookTitleClickParam
}
})
}}
listOfBooksWithChapters={listOfBooksWithChapters}
/>
</Row>
)
}
Und hier ist der komplette code ohne die Importe für die Listenansicht-Komponente
class VideoList extends React.Component {
constructor(props) {
super(props);
this.subscription = null;
}
componentWillUnmount() {
if (this.subscription) {
//unsubscribe
this.subscription();
}
}
renderVideos() {
const { videosQuery } = this.props;
return videosQuery.edges.map(({ node: { id, title, ytDefaultThumbnail } }) => {
return (
<Col sm="4" key={id}>
<Card>
<CardImg top width="100%" src={ytDefaultThumbnail} alt="video image" />
<CardBlock>
<CardTitle>
<Link
className="post-link"
to={`/video/${id}`}>
{title}
</Link>
</CardTitle>
</CardBlock>
</Card>
</Col>
);
});
}
renderLoadMore() {
const { videosQuery, loadMoreRows } = this.props;
if (videosQuery.pageInfo.hasNextPage) {
return (
<Button id="load-more" color="primary" onClick={loadMoreRows}>
Load more ...
</Button>
);
}
}
renderFilters() {
const { listOfBooksWithChapters, refetch } = this.props;
return (
<Row>
<FilterBooks
onBookTitleClickParam={(onBookTitleClickParam) => {
return refetch({
variables: {
limit: 3,
after: 0,
filterByBook: onBookTitleClickParam
}
})
}}
listOfBooksWithChapters={listOfBooksWithChapters}
/>
</Row>
)
}
render() {
const { loading, videosQuery } = this.props;
if (loading && !videosQuery) {
return (
<div>{ /* loading... */}</div>
);
} else {
return (
<div>
<Helmet
title="Videos list"
meta={[{
name: 'description',
content: 'List of all videos'
}]} />
<h2>Videos</h2>
{this.renderFilters()}
<Row>
{this.renderVideos()}
</Row>
<div>
<small>({videosQuery.edges.length} / {videosQuery.totalCount})</small>
</div>
{this.renderLoadMore()}
</div>
);
}
}
}
export default compose(
graphql(VIDEOS_QUERY, {
options: () => {
return {
variables: {
limit: 3,
after: 0,
filterByBook: null
},
};
},
props: ({ data }) => {
const { loading, videosQuery, fetchMore, subscribeToMore, refetch } = data;
const loadMoreRows = () => {
return fetchMore({
variables: {
after: videosQuery.pageInfo.endCursor,
},
updateQuery: (previousResult, { fetchMoreResult }) => {
const totalCount = fetchMoreResult.videosQuery.totalCount;
const newEdges = fetchMoreResult.videosQuery.edges;
const pageInfo = fetchMoreResult.videosQuery.pageInfo;
return {
videosQuery: {
totalCount,
edges: [...previousResult.videosQuery.edges, ...newEdges],
pageInfo,
__typename: "VideosQuery"
}
};
}
});
};
return { loading, videosQuery, subscribeToMore, loadMoreRows, refetch };
}
}),
graphql(LIST_BOOKS_QUERY, {
props: ({ data }) => {
const { listOfBooksWithChapters } = data;
return { listOfBooksWithChapters };
}
}),
)(VideoList);
Frage:
Warum refetch
Funktion gibt Daten ohne Berücksichtigung der neuen Variablen filterByBook
? Wie um zu überprüfen, welche variables
Objekt, die ich geliefert, um die refetch
Funktion? Muss ich die remap-Daten, die ich empfangen von refetch
Funktion zurück, um die Komponente props
?
EDIT:
Fand ich den Weg zu finden, was variable
Objekt, die ich geliefert, um die Abfrage und festgestellt, dass variable
- Objekt Filter-Ereignis gibt diese Daten
variables:Object
after:0
limit:3
variables:Object
after:0
filterByBook:"2"
limit:3
Du musst angemeldet sein, um einen Kommentar abzugeben.
Scheint es, dass
refetch
Funktion ist nicht dazu gedacht, refetch Daten mit anderen Variablen gesetzt (siehe diese Diskussion).Ich endlich erfolgreich mein Problem gelöst mit Hilfe von dieser Artikel