请注意,上述代码示例所提供的是使用 Apollo GraphQL 客户端与 React 应用程序一起修改数据的一般步骤。具体实现可能会因您的应用程序结构和需求而有所不同。
要在React中使用Apollo GraphQL客户端修改数据,您需要遵循以下步骤:
npm install @apollo/client graphql
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://example.com/graphql',
cache: new InMemoryCache()
});
ReactDOM.render(
,
document.getElementById('root')
);
在上面的代码中,您需要将uri
替换为您的GraphQL服务器的地址。
useMutation
钩子定义GraphQL变异:import { useMutation, gql } from '@apollo/client';
const ADD_TODO = gql`
mutation AddTodo($text: String!) {
addTodo(text: $text) {
id
text
}
}
`;
const AddTodoForm = () => {
const [addTodo] = useMutation(ADD_TODO);
const handleSubmit = (event) => {
event.preventDefault();
const text = event.target.elements.text.value;
addTodo({ variables: { text } });
event.target.reset();
};
return (
);
};
在上面的代码中,您需要将ADD_TODO
变异替换为您自己的GraphQL变异。确保变异的名称和参数与您的GraphQL模式匹配。
useQuery
钩子来获取更新后的数据:import { useQuery, gql } from '@apollo/client';
const GET_TODOS = gql`
query GetTodos {
todos {
id
text
}
}
`;
const TodoList = () => {
const { loading, data } = useQuery(GET_TODOS);
if (loading) return Loading...
;
return (
{data.todos.map((todo) => (
- {todo.text}
))}
);
};
在上面的代码中,您需要将GET_TODOS
查询替换为您自己的GraphQL查询。确保查询的字段和返回的数据与您的GraphQL模式匹配。
通过遵循上述步骤,您可以在使用Apollo GraphQL客户端的React应用程序中方便地修改数据。