Question

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

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

所以我尝试在我的Layout组件中使用read Fragment，如下所示：

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中的数据？

1 个答案: