node.js - Apollo Client V2 获取数据的顺序错误

Question

我正在构建一个使用 Json Web token 授权的应用程序。我正在使用 Node.js、GraphQL 和 Apollo 客户端 V2(以及其他一些东西，但这些与此处无关)构建此应用程序。我创建了一个 login 解析器和一个 currentUser 解析器，让我可以通过 JWT 获取当前用户。我稍后使用该 token 并将其发送到我的授权 header 中，结果如下所示:

那么这部分就完成了!但这就是我遇到的麻烦。

我试图解释一下情况

我使用 React 和 Apollo Client V2 来实现该项目的前端部分。当我进行登录突变时，我会这样做。使用 formik，我创建了我的 onSubmit:

const response = await mutate({
  variables: {
    email: values.email,
    password: values.password,
  },
})
const token = response.data.login.jwt
localStorage.setItem('token', token)

history.push('/') // Navigating to the home page

这就是我想要通过登录突变返回的内容(只是 token ):

export const loginMutation = gql`
  mutation($email: String!, $password: String!) {
    login(email: $email, password: $password) {
      jwt
    }
  }
`

为了获取 currentUser 的数据，我已将 currentUser 查询 放入根路由器文件中。 请为组件命名为 PrivateRoute 表示歉意。我还没有重命名它，因为我找不到合适的名字。抱歉。所以在 /src/router/index.js 中我有这个:

// First the actual query
const meQuery = gql`
{
  currentUser {
    id
    username
    email
  }
}
`

...

// A component that passess the currentUser as a prop, otherwise it will be null
const PRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props => {
        return (
          <Component
            {...props}
            currentUser={
              rest.meQuery.currentUser ? rest.meQuery.currentUser : null
            }
          />
        )
      }}
    />
  )
}

// Another component that uses the meQuery so I later can access it if I use the PrivateRoute component.
const PrivateRoute = graphql(meQuery, { name: 'meQuery' })(PRoute)

// Using the PrivateRoute. And in my Home component I can later grap the currentUser via propsb
const App = () => (
  <Router>
    <div>
      <PrivateRoute exact path="/" component={Home} />
...

在 Home 组件中，我抓取了 prop:

const { data: { loading, error, getAllPosts = [], currentUser } } = this.props

我将其传递给我的 Navbar 组件:

<Navbar currentUser={this.props.currentUser} />

在 Navbar 组件中，我会获取用户名(如果存在):

const { username } = this.props.currentUser || {}

然后我渲染它。

这就是我遇到的麻烦

当我到达 /login 路由时，我的应用程序当前正在尝试获取 currentUser。成功登录后，我取回了 token ，但不会再次获取 currentUser 查询。因此，我必须刷新页面才能获取当前用户及其所有值。

我还创建了一个小视频来演示我的问题是什么。我相信它会比我尝试输入问题更清楚地向您展示问题。

这是视频:https://www.youtube.com/watch?v=GyI_itthtaE

我还要感谢您阅读我的帖子，希望您能帮助我。我不知道为什么这会发生在我身上，而且我似乎无法解决它。我已尽力写出这个问题，如果阅读起来令人困惑，很抱歉。

谢谢

Answer 1

我认为您可以通过将查询的FetchPolicy设置为“缓存和网络”来解决此问题。您可以阅读有关获取策略的信息 here: "GraphQL query options.fetchPolicy"

根据您的具体情况，我认为您可以更新此行

const PrivateRoute = graphql(meQuery, { name: 'meQuery' })(PRoute)

对此:

const PrivateRoute = graphql(meQuery, { name: 'meQuery', options: {fetchPolicy: 'cache-and-network'} })(PRoute)

说明

如文档中所述，默认策略是缓存优先。

1. currentUser 第一次被查询并更新缓存。
2. 您执行登录突变，缓存不会更新您更新它(阅读 here: "Updating the cache after amutation" )。
3. 再次执行currentUser查询，但由于默认的缓存优先策略，过时的结果将仅从缓存中检索。

来自official documentation :

cache-first: This is the default value where we always try reading data from your cache first. If all the data needed to fulfill your query is in the cache then that data will be returned. Apollo will only fetch from the network if a cached result is not available. This fetch policy aims to minimize the number of network requests sent when rendering your component.

cache-and-network: This fetch policy will have Apollo first trying to read data from your cache. If all the data needed to fulfill your query is in the cache then that data will be returned. However, regardless of whether or not the full data is in your cache this fetchPolicy will always execute query with the network interface unlike cache-first which will only execute your query if the query data is not in your cache. This fetch policy optimizes for users getting a quick response while also trying to keep cached data consistent with your server data at the cost of extra network requests.

除了这两个之外，还有两个策略:“仅限网络”和“仅限缓存”，这是 link to the documentation