阿波罗组合和酶挂载是指在React中使用阿波罗(Apollo)客户端来管理数据状态,并将数据传递给组件进行渲染。以下是一个示例解决方法:
npm install @apollo/client react-apollo graphql
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://api.example.com/graphql',
cache: new InMemoryCache(),
});
import { ApolloProvider } from '@apollo/client';
ReactDOM.render(
,
document.getElementById('root')
);
import { useQuery, gql } from '@apollo/client';
const GET_USERS = gql`
query GetUsers {
users {
id
name
}
}
`;
function UserList() {
const { loading, error, data } = useQuery(GET_USERS);
if (loading) return Loading...
;
if (error) return Error :(
;
return (
{data.users.map(user => (
- {user.name}
))}
);
}
import { graphql } from '@apollo/client/react/hoc';
const GET_USERS = gql`
query GetUsers {
users {
id
name
}
}
`;
function UserList({ data }) {
if (data.loading) return Loading...
;
if (data.error) return Error :(
;
return (
{data.users.map(user => (
- {user.name}
))}
);
}
export default graphql(GET_USERS)(UserList);
以上是使用阿波罗组合和酶挂载的基本示例,您可以根据自己的需求进行调整和扩展。