mutation CreateArticle($title: String!, $content: String!) {
createArticle(input: { data: { title: $title, content: $content } } ) {
article {
id
title
content
}
}
}
import React, { useState } from 'react';
import { useMutation } from '@apollo/client';
import { CREATE_ARTICLE } from '../graphql/mutations';
const AddArticleScreen = () => {
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const [createArticle] = useMutation(CREATE_ARTICLE, {
onCompleted: () => {
console.log('Article created!')
},
onError: (error) => {
console.error(error);
}
});
const handleCreateArticle = () => {
createArticle({ variables: { title, content } });
}
return (
setTitle(text)}
value={title}
placeholder="Title"
/>
setContent(text)}
value={content}
placeholder="Content"
/>
)
}
export default AddArticleScreen;
重要提示:确保在应用程序的起始页面中正确设置 Apollo Provider,例如:
import { ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:1337/graphql',
});
const App = () => {
return (
...
)
}
export default App;
下一篇:Apollo内存缓存配置