react路由守卫+重定向

by Jun Hyuk Kim

金俊赫

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

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.

很热， 是有原因的。 简而言之，它是一种查询语言，可让您从API中确切地询问您需要什么。 这样可以减少使用不同方法可能发生的任何不必要的数据传输。

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后端进行通信。 我在弄清楚如何重新获取查询时遇到一些困难，然后将页面重定向到包含更新数据的主页。 在这里，事情开始变得有些棘手。

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:

对我来说，问题在于弄清楚突变的实际调用方式以及返回的结果。 我们可以将它通过连接后接入突变graphql(mutation)(*YourComponent*)通过this.props.mutate() 此函数返回一个Promise。 我们可以链接.then()函数以在突变后调用函数。 mutate函数还可以接受用于突变的变量。 完整的示例如下所示：

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:

这意味着我们的变异需要两个变量，分别是标题和内容。 当我们将其发送到后端服务器时，它们会传递到我们的变异中。 假设我们的变异是添加带有标题和内容的注释。 为了清楚起见，我将提供一个简单的示例说明我们的突变形式：

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 this

export 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.

那么，此功能发生后会发生什么呢？ 我们的后端接收到信息，然后发生突变。 但是，我们的前端不知道发生了这种突变。 它不会重新获取先前获取的查询(在我们的情况下，可能类似于fetchAllNotes)。 这是mutate函数非常方便的地方。 我们可以传入一个名为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客户端在发生突变后重新获取fetchAllNotesquery 。 然后将用户重定向到/notes目录(React-Router)。 还记得我们的mutate函数返回Promise吗？ 这都应该起作用，对吗？ 嗯......通过设计，阿波罗队取得它，这样refetchQueries将在相同的时间发生.then语句。 这意味着refetchQueries语句可以出现在refetchQueries之前。 这可能导致需要更新信息的组件无法更新。

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?

在这种特定情况下，将会发生的情况是在refetchQueries发生之前 ，我们的用户将被重定向。 该信息将不会更新。 这很棘手，因为mutate函数返回Promise。 阿波罗团队的设计使得它使refetchQueries可以发生任何一起.then陈述。 那么，我们如何处理呢？

The Apollo team realized that this could potentially be a problem. They came out with a , 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，因此发生在任何.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.

如果这对您有用，请加油！ 看起来修复成功了！ 但是，这对我个人而言不起作用。 另外，由于仅在更新版本的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组件的生命周期进行一些问题解决，以确保我的组件能够正确呈现更新的数据。 修复程序本身很短而且很简单！ 在我的Notes组件上，该组件呈现笔记并通过graphql函数连接到fetchAllNotes查询，我添加了一个快速修复程序以确保正确呈现了我的数据。

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存在)以及数据长度是否已更改。 这使得我们的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!

现在一切正常！ 希望awaitRefetchQueries变量对您awaitRefetchQueries ，并且广为人知，这是一个更优雅的解决方案。 但是，很难找到有关如何正确使用awaitRefetchQueries示例/文档。 现在，对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!

请随时在评论中留下任何反馈或问题，我们将竭尽所能。 我绝不是专家，但我很乐意为您解决问题并帮助解决！

翻译自:

react路由守卫+重定向