react路由守衛(wèi)+重定向

by Jun Hyuk Kim

金俊赫

React + Apollo：如何在重新查詢后進行重定向 (React + Apollo: How to Redirect after Refetching a Query)

GraphQL is hot, and for a good reason. In short, it is a query language that allows you to ask for exactly what you need from your API. This cuts any unnecessary data transfer that may occur with different methodologies.

GraphQL很熱， 這是有原因的。 簡而言之，它是一種查詢語言，可讓您從API中確切地詢問您需要什么。 這樣可以減少使用不同方法可能發(fā)生的任何不必要的數(shù)據(jù)傳輸。

I was working on a project where I was using a GraphQL back-end. I decided to use React and Apollo Client as my front-end to communicate with my GraphQL back-end. I was having some difficulty figuring out how to refetch my query, and then have my page redirected to the main page with the updated data. Here’s where things started to get a little bit tricky.

我正在使用GraphQL后端的項目中工作。 我決定使用React和Apollo Client作為前端與GraphQL后端進行通信。 我在弄清楚如何重新獲取查詢時遇到一些困難，然后將頁面重定向到包含更新數(shù)據(jù)的主頁。 在這里，事情開始變得有些棘手。

The problem, for me, was figuring out how the mutation was actually called, and what was returned. We can access the mutation after connecting it via the graphql(mutation)(*YourComponent*) through this.props.mutate(). This function returns a Promise. We can chain .then() functions to call functions after the mutation. The mutate function can also take in variables for the mutation. A full example would be something like this:

對我來說，問題在于弄清楚突變的實際調(diào)用方式以及返回的結(jié)果。 我們可以將它通過連接后接入突變graphql(mutation)(*YourComponent*)通過this.props.mutate() 此函數(shù)返回一個Promise。 我們可以鏈接.then()函數(shù)以在突變后調(diào)用函數(shù)。 mutate函數(shù)還可以接受用于突變的變量。 完整的示例如下所示：

this.props.mutate({ variables:{ title: this.state.title, content: this.state.content }})

This would mean that our mutation is taking in two variables, called title and content. They are passed into our mutation when we send it to our back-end server. Let’s say our mutation is adding a note, with a title and content. To make things clear, I’ll include a simple example of what our mutation would look like:

這意味著我們的變異需要兩個變量，分別是標(biāo)題和內(nèi)容。 當(dāng)我們將其發(fā)送到后端服務(wù)器時，它們會傳遞到我們的變異中。 假設(shè)我們的變異是添加帶有標(biāo)題和內(nèi)容的注釋。 為了清楚起見，我將提供一個簡單的示例說明我們的突變形式：

const mutation = gql` mutation AddNote($title: String, $content: String){ addNote(title:$title, content:$content){ title content } }}`// Our component should also be connected to Apollo client, so // something like thisexport default graphql(mutation)(Component)

So, what happens after this function occurs? Our back-end receives the information, and the mutation occurs. However, our front-end doesn’t know that the mutation occurred. It doesn’t refetch the query that we previously fetched (in our case, maybe something like fetchAllNotes). This is where the mutate function gets pretty handy. We can pass in a variable called refetchQueries, which will refetch any queries we ask for.

那么，此功能發(fā)生后會發(fā)生什么呢？ 我們的后端接收到信息，然后發(fā)生突變。 但是，我們的前端不知道發(fā)生了這種突變。 它不會重新獲取先前獲取的查詢(在我們的情況下，可能類似于fetchAllNotes)。 這是mutate函數(shù)非常方便的地方。 我們可以傳入一個名為refetchQueries的變量，該變量將重新獲取我們要求的任何查詢。

this.props.mutate({ variables:{ title: this.state.title, content: this.state.content }, refetchQueries:[{ query: fetchAllNotes }]}).then(() => this.props.history.push('/notes'))

In this case, we’re telling the Apollo client to refetch the fetchAllNotesquery after the mutation occurs. Then redirecting the user to the /notes directory (React-Router). Remember that our mutate function returns a Promise? This should all work, right? Well… by design, the Apollo team made it so that refetchQueries would happen at the same time as the .then statement. This means that the .then statement can occur before refetchQueries. This can lead to the component needing the updated info to not being updated.

在這種情況下，我們要告訴Apollo客戶端在發(fā)生突變后重新獲取fetchAllNotesquery 。 然后將用戶重定向到/notes目錄(React-Router)。 還記得我們的mutate函數(shù)返回Promise嗎？ 這都應(yīng)該起作用，對嗎？ 嗯......通過設(shè)計，阿波羅隊取得它，這樣refetchQueries將在相同的時間發(fā)生.then語句。 這意味著refetchQueries語句可以出現(xiàn)在refetchQueries之前。 這可能導(dǎo)致需要更新信息的組件無法更新。

In this specific case, what would happen is our user will be redirected before the refetchQueries occurs. The information will not be updated. This is tricky because the mutate function returns a Promise. The Apollo team made it by design so that refetchQueries can happen alongside any .then statements. So, how do we deal with this?

在這種特定情況下，將會發(fā)生的情況是在refetchQueries發(fā)生之前 ，我們的用戶將被重定向。 該信息將不會更新。 這很棘手，因為mutate函數(shù)返回Promise。 阿波羅團隊的設(shè)計使得它使refetchQueries可以發(fā)生任何一起.then陳述。 那么，我們?nèi)绾翁幚砟?#xff1f;

The Apollo team realized that this could potentially be a problem. They came out with a solution, which allows for the refetchQueries to take in a variable that would allow for it to return a Promise, and thus happen before any .then statements. Our code would look something like this:

阿波羅團隊意識到這可能是一個問題。 他們提出了一個解決方案 ，該方案允許refetchQueries接受一個變量，該變量將允許它返回Promise，因此發(fā)生在任何.then語句之前。 我們的代碼如下所示：

this.props.mutate({ variables:{ title: this.state.title, content: this.state.content }, refetchQueries:[{ query: fetchAllNotes, variables:{ awaitRefetchQueries: true } }]}).then(() => this.props.history.push('/notes'))

If this worked for you, woohoo! Looks like the fix worked! However, this did not work for me personally. Also, because it is only available on the more recent versions of Apollo Client, it will not be available in older versions of Apollo Client.

如果這對您有用，請加油！ 看起來修復(fù)成功了！ 但是，這對我個人而言不起作用。 另外，由于僅在更新版本的Apollo Client中可用，因此在較舊版本的Apollo Client中將不可用。

I had to do a bit of problem-solving with React component life cycles to make sure my component would correctly render the updated data. The fix itself is pretty short and pretty straightforward! On my Notes component, which renders the notes and is connected to the fetchAllNotes query by the graphql function, I added a quick fix to make sure my data was correctly rendered.

我必須對React組件的生命周期進行一些問題解決，以確保我的組件能夠正確呈現(xiàn)更新的數(shù)據(jù)。 修復(fù)程序本身很短而且很簡單！ 在我的Notes組件上，該組件呈現(xiàn)筆記并通過graphql函數(shù)連接到fetchAllNotes查詢，我添加了一個快速修復(fù)程序以確保正確呈現(xiàn)了我的數(shù)據(jù)。

componentDidUpdate(prevProps){ if(prevProps.data.notes && prevProps.data.notes.length !== this.props.data.notes.length){ // Logic to update component with new data }}

Basically, we’re saying that when the component updates, we want to see if the notes query was previously completed (checking if prevProps.data.notes exists) and if the length of the data changed. This allows for our React component to update the information once the refetch query is complete.

基本上，我們說的是，在組件更新時，我們想查看notes查詢先前是否已完成(檢查prevProps.data.notes存在)以及數(shù)據(jù)長度是否已更改。 這使得我們的React組件在refetch查詢完成后即可更新信息。

Everything should work now! Hopefully the awaitRefetchQueries variable worked for you and becomes more known, which is a much more elegant solution. However, it’s pretty difficult to find examples/documentation of how to use awaitRefetchQueries properly. For now, having good understanding of React component life cycles is enough to help you go around the “Gotchas” of Apollo + React!

現(xiàn)在一切正常！ 希望awaitRefetchQueries變量對您awaitRefetchQueries ，并且廣為人知，這是一個更優(yōu)雅的解決方案。 但是，很難找到有關(guān)如何正確使用awaitRefetchQueries示例/文檔。 現(xiàn)在，對React組件的生命周期有足夠的了解就足以幫助您解決Apollo + React的“陷阱”！

Please feel free to leave any feedback or questions in the comments, and I’ll do my best to help. I’m in no way an expert, but I would love to problem solve with you and help figure it out!

請隨時在評論中留下任何反饋或問題，我們將竭盡所能。 我絕不是專家，但我很樂意為您解決問題并幫助解決！

翻譯自: https://www.freecodecamp.org/news/react-apollo-how-to-redirect-after-refetching-a-query-a1e853e062e9/

react路由守衛(wèi)+重定向

總結(jié)

以上是生活随笔為你收集整理的react路由守卫+重定向_React + Apollo：如何在重新查询后进行重定向的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。