Question

我遇到一个问题，一直在寻找关于stackeroverflow的解决方案，但没有解决方法。我已经制作了一个组件，该组件在挂载到后端的调用中查询，该后端在同一查询上给出不同的响应。我也在使用SSR，并且正在恢复状态。服务器呈现的状态似乎是正确的，但是组件似乎仅在还原第一个条目。

// query
query random {
  randomString{
    id // response is a random ID
    text // response is a random String
  }
}

import React from "react"
import gql from 'graphql-tag';
import { Query } from 'react-apollo';

class RandomContent extends React.Component {
    constructor(props){
        super(props)
    }
  render() {
      return(
          <Query query={gql`
          query Rand${this.props.count} {
              randomString{
                  id
                  text
              }
          }`}
          fetchPolicy={"cache-first"}
          >
            {({ loading, error, data }) => {
                if (loading) return "Loading...";
                if (error) return `Error! ${error.message}`;
                return (
                    <div>
                        <p>id:{data.randomString.id}</p>
                        <p>id:{data.randomString.text}</p>
                    </div>
                )
            }}
          </Query>
      )
  }
} 

export default (RandomContent)

当调用该组件时，该组件将获取字符串和id并进行渲染，但是当使用这些组件中的两个时，它们将渲染为相同。随机字符串和ID相同。我认为即使结果ID不同，查询仍在缓存。我正在使用的缓存设置如下

cache: new InMemoryCache(
  {
    dataIdFromObject: object => {
      switch (object.__typename) {
          case 'User': return object.id
          case 'RandomString': return object.id
          default: return defaultDataIdFromObject(object)
      }
  }).restore(window.__APOLLO_STATE__)

这里可能出现问题

RandomString:OU9: {id: "OU9", text: "GaubfA0AkDRtm8oZCIndiiX96CJweaRn8R0MGOzMkB6D6vosgCQK43gAaUFh4fMKqzNdAFsQK33uAQziDnc4sYeNVBXWmRKQ7jS9", __typename: "RandomString"}
RandomString:ucR: {id: "ucR", text: "rEnJYTPil2RwpuPkE2Nb4w6CoVzkjpzcrnDrOcJ3PAniRlzBqEmnnV1hljELVJ9wZSoIW0EqmvBw12CMv5mSu1O0TPF0LevM6UOX", __typename: "RandomString"}

如您所见，渲染仅使用第一个查询响应ID：OU9

Apollo客户端重复查询问题？

0 个答案: