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

Question

登录突变后，返回一个 jwt token 和一个用户对象(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“测试”结果未定义时)。但是当我在片段查询中添加一个不存在的字段时，我收到以下消息:

这个错误是正常的，但证明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。

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