如何在 Apollo 中使用 readFragment 中的数据？

Question

登录突变后，返回一个 jwt 令牌和一个用户对象（id 和 firstName）并存储在缓存中（如下图所示）。

我想使用 readFragment 从缓存中检索用户信息并将其传递给 Layout 组件。

所以我尝试在我的布局组件中使用读取片段，如下所示：

class Layout extends Component {

  render() {
    const test = this.props.client.readFragment({
      id: 1, // `id` is any id that could be returned by `dataIdFromObject`.
      fragment: gql`
        fragment user on User {
          id
          firstName
        }
      `
    });

    return (
      <div>
        <AppBar
          title="myApp"
        />
        <Sidebar
          //   firstName={this.props.data.firstName}
        />
        {this.props.children}
      </div>
    );
  }
}

export default withApollo(withRouter(Layout));

这里的问题是我不知道如何从 readFragment 结果中传递数据（当我尝试 console.log "test" 结果未定义时）。但是当我在片段查询中添加一个不存在的字段时，我收到以下消息：

这个错误是正常的，但证明readFragment可以读取用户信息。

那么如何在我的 Layout 组件中使用 readFragment 中的数据？

感谢您的帮助。

编辑： 这是我的 ApolloClient 配置：

const httpLink = createHttpLink({
  uri: "http://127.0.0.1/graphql"
});

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) history.push("/erreur", { errors: graphQLErrors });

  if (networkError) history.push("/erreur", { errors: networkError });
});

const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem("token");
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ""
    }
  };
});

const link = ApolloLink.from([errorLink, authLink, httpLink]);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache({
    dataIdFromObject: object => object.id
  })
});

Answer 1

终于可以使用了。我已经更新了我所有的 npm 依赖项，它似乎是问题的根源。对于那些感兴趣的人，这里是代码：

const data = this.props.client.readFragment({
      id: 1, // `id` is any id that could be returned by `dataIdFromObject`.
      fragment: gql`
        fragment user on User {
          id
          firstName
        }
      `
    });

    if(data)
      console.log(data.id);

这里的缺点是您需要 dataIdFromObject 返回的 ID，在我的例子中是用户 ID。

如果你想使用你的数据，你只需要控制数据变量不为空，然后你就可以使用你需要显示的信息。

如何在 Apollo 中使用 readFragment 中的数据？

How to use data from readFragment in Apollo?

javascript

reactjs

apollo

react-apollo

apollo-client