在Apollo React中,我们可以使用connect函数和withApollo高阶组件来轻松地实现组件之间数据的共享。同时,我们也可以使用GraphQL的查询和变异来处理数据转换。
以下是一个示例:
1.创建一个GraphQL查询并使用withApollo函数将其传递给组件
import { gql } from 'apollo-boost';
import { withApollo } from 'react-apollo';
const GET_USERS = gql`
query {
users {
id
name
email
}
}
`;
export default withApollo(UserList);
2.在组件中使用connect函数将数据转换为所需的格式
import { connect } from 'react-redux';
const mapStateToProps = (state) => {
const { data } = state.apollo.cache.readQuery({ query: GET_USERS });
const users = data.users.map((user) => ({
id: user.id,
name: user.name,
email: user.email,
}));
return { users };
};
export default connect(mapStateToProps)(UserList);
3.在组件中使用转换后的数据
import React from 'react';
const UserList = ({ users }) => {
return (
{users.map((user) => (
-
{user.name} ({user.email})
))}
);
};
export default UserList;