执行突变时，ApolloClient 的所有值都为 null答案

【问题标题】：ApolloClient all values result to null when performing a mutation执行突变时，ApolloClient 的所有值都为 null
【发布时间】：2023-03-20 10:30:01
【问题描述】：

我开始使用 ApolloClient，我必须说，文档很糟糕。

我的应用程序将使用 GraphQL，但需要使用简单的 POST 请求来完成登录，该请求以表单数据的形式提供给 /login 的用户名和密码。

老兄，让它发挥作用简直就是一场噩梦。

由于我必须使用apollo-link-rest，所以我必须先构建我的客户端：

import ApolloClient from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloLink } from 'apollo-link'
import { createHttpLink } from 'apollo-link-http'
import { onError } from 'apollo-link-error'
import { RestLink } from 'apollo-link-rest'

const cache = new InMemoryCache()

const httpLink = new createHttpLink({
  credentials: 'include',
})

const restLink = new RestLink({
  endpoints: {
    localhost: {
      uri: "http://localhost:8080"
    }
  },
  credentials: 'include'
})

const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
      console.log(`[GraphQL error] Message: ${message}, ${path}`)
    })
  }
  if (networkError) {
    console.log(
      `[Network error ${networkError}] Operation: ${operation.operationName}`
    )
  }
})

export const client = new ApolloClient({
  link: ApolloLink.from([errorLink, restLink, httpLink]),
  cache,
})

然后我有我的问题：

const LOGIN_QUERY = gql`
  mutation doLogin($username: String!, $password: String!, $formSerializer: any) {
    user(input: { username: $username, password: $password})
      @rest(
        path: "/login"
        type: "user"
        method: "POST"
        endpoint: "localhost"
        bodySerializer: $formSerializer
      ) {
        id
        name
      }
  }`

const formSerializer = (data, headers) => {
  const formData = new URLSearchParams()
  for (let key in data) {
    if (data.hasOwnProperty(key)) {
      formData.append(key, data[key])
    }
  }

  headers.set('Content-Type', 'application/x-www-form-urlencoded')

  return { body: formData, headers }
}

我发现文档中没有关于如何发送表单数据的示例，这简直太疯狂了，我不得不在谷歌上搜索了很多，直到我找到了如何去做。

我在登录组件中执行查询：

  const [doLogin, { data }] = useMutation(LOGIN_QUERY, {
    onCompleted: () => {
      console.log("Success")
    },
    onError: () => {
      console.log("Poop")
    }
  })

  const handleSubmit = (event) => {
    event.preventDefault()
    console.log('logging in...')
    doLogin({
      variables: { username, password, formSerializer },
    })
  }

服务器让我登录，返回一个会话 cookie，以及一个包含以下内容的正文：

{
    "data": {
        "user": {
            "id": 1
            "name": "Foobar"
        }
    }
}

当我使用 ApolloClient 谷歌浏览器插件检查缓存状态时，缓存有：

user:null
    id: null
    name: null

所以这是我的问题：

我需要设置默认状态吗？
文档仅显示首先查询的对象的突变，如果对象已存在于缓存中，我是否只能使用突变更新缓存？
我需要为每种类型编写解析器吗？
还有，为什么我会得到空值？
是否所有数据都需要以 data 对象的形式返回，即使是其余查询？
必须将formSerializer 作为变量传递给查询，因为我觉得那太丑了。

如前所述... ApolloClient 文档是我读过的最糟糕的文档之一。一点都不友好。

【问题讨论】：

useEffect(() => { if(!data) return; console.log(data) }, [data]); 说什么？这是否也返回空值？
是的，我也在那里得到空值user: id: null name: null __typename: "user"
看到这个github comment 和doc 我认为你的问题是服务器正在用不必要的data 键包装数据。
仔细阅读响应转换文档。阿波罗期待{ "id": 1, "name": "Apollo" }我认为
哈，多么同步

标签： reactjs graphql react-apollo apollo-client apollo-link-rest

【解决方案1】：

根据Response transforming，apollo 期望来自 REST API 的响应如下：

{
  "id": 1,
  "name": "Apollo"
}

如果你无法控制后端，你可以使用自定义的响应转换器：

responseTransformer: async response => response.json().then(({data}) => data.data?.user)

【讨论】：