在Apollo Client中,可以使用useLazyQuery
钩子来实现懒惰重新获取数据的功能。下面是一个包含代码示例的解决方法:
首先,安装apollo-client和react-apollo:
npm install apollo-client react-apollo
然后,创建一个Apollo Client实例:
import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
const cache = new InMemoryCache();
const link = new HttpLink({
uri: 'https://your-graphql-api-endpoint',
});
const client = new ApolloClient({
cache,
link,
});
接下来,在你的组件中使用useLazyQuery
钩子:
import React, { useState } from 'react';
import { useLazyQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
const GET_DATA = gql`
query GetData($id: ID!) {
data(id: $id) {
id
name
}
}
`;
const MyComponent = () => {
const [id, setId] = useState('');
const [getData, { loading, data }] = useLazyQuery(GET_DATA);
const handleClick = () => {
getData({ variables: { id } });
};
if (loading) {
return Loading...;
}
if (data) {
return (
{data.data.name}
);
}
return (
setId(e.target.value)}
/>
);
};
export default MyComponent;
在上面的代码中,我们首先定义了一个GraphQL查询GET_DATA
,然后使用useLazyQuery
钩子来创建一个getData
函数。当用户点击“Get Data”按钮时,调用getData
函数来获取数据。在查询结束后,数据将会被存储在data
变量中,然后在组件中进行渲染。
这样,每次点击“Get Data”按钮时,都会重新获取数据。