How to use the urql.useMutation function in urql
To help you get started, we’ve selected a few urql examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
FormidableLabs / urql / examples / 3-ssr-with-nextjs / components / Submit.js View on Github 
export default function Submit() {
const [_, executeMutation] = useMutation(createPostMutation);
const handleSubmit = useCallback(
event => {
event.preventDefault();
const form = event.target;
const formData = new window.FormData(form);
const title = formData.get('title');
const url = formData.get('url');
form.reset();
executeMutation({
title,
url
});
},
[executeMutation]export const Home: FC = () => {
const [res, executeQuery] = useQuery({ query: TodoQuery });
const refetch = useCallback(
() => executeQuery({ requestPolicy: 'network-only' }),
[executeQuery]
);
const [toggleTodoMutation, executeToggleTodoMutation] = useMutation(
ToggleTodo
);
const [deleteTodoMutation, executeDeleteTodoMutation] = useMutation(
DeleteTodo
);
const todos = useMemo(() => {
if (res.fetching || res.data === undefined) {
return ;
}
if (res.error) {
return {res.error.message};
}
return (
<ul>
{res.data.todos.map((todo: ITodo) => (
</ul>export const Todo: FC = props => {
const [mutation, executeMutation] = useMutation(RemoveTodo);
const handleToggle = () => executeMutation({ id: props.id });
return (
<li>
<p>{props.text}</p>
{mutation.fetching && <span>(updating)</span>}
</li>
);
};export default function PostUpvoter({ votes, id }) {
const [_, executeMutation] = useMutation(updatePostMutation);
const upvotePost = useCallback(() => {
executeMutation({
id,
votes: votes + 1,
});
}, [votes, id, executeMutation]);
return (
<button>
{votes}
<style>{`
button {
background-color: transparent;
border: 1px solid #e4e4e4;</style></button>export default function DocumentsProvider(props: Props) {
const [
{ data: currentUserData, fetching: userFetching },
refetchCurrentUser,
] = useQuery({
query: currentUserQuery,
requestPolicy: "network-only",
});
const [{ data: docsData }, refreshDocsData] = useQuery({
query: documentsQuery,
requestPolicy: "network-only",
});
const [, saveDocumentAction] = useMutation<
SaveDocumentMutationResponse,
SaveDocumentMutation
>(saveDocumentMutation);
const [, deleteDocumentAction] = useMutation<
DeleteDocumentMutationResponse,
DeleteDocumentMutation
>(deleteDocumentMutation);
const [, login] = useMutation(
loginMutation
);
const [, createUser] = useMutation<
CreateUserMutationResponse,
CreateUserMutation
>(createUserMutation);
const documents: PubDocument[] | null = React.useMemo(query: currentUserQuery,
requestPolicy: "network-only",
});
const [{ data: docsData }, refreshDocsData] = useQuery({
query: documentsQuery,
requestPolicy: "network-only",
});
const [, saveDocumentAction] = useMutation<
SaveDocumentMutationResponse,
SaveDocumentMutation
>(saveDocumentMutation);
const [, deleteDocumentAction] = useMutation<
DeleteDocumentMutationResponse,
DeleteDocumentMutation
>(deleteDocumentMutation);
const [, login] = useMutation(
loginMutation
);
const [, createUser] = useMutation<
CreateUserMutationResponse,
CreateUserMutation
>(createUserMutation);
const documents: PubDocument[] | null = React.useMemo(
() => documentsWithEditorState(get("documents")(docsData)),
[docsData]
);
const user: PubUser | null = get("currentUser")(currentUserData) || null;
const dataLoaded = !!documents;
const [
currentDocument,const [
{ data: currentUserData, fetching: userFetching },
refetchCurrentUser,
] = useQuery({
query: currentUserQuery,
requestPolicy: "network-only",
});
const [{ data: docsData }, refreshDocsData] = useQuery({
query: documentsQuery,
requestPolicy: "network-only",
});
const [, saveDocumentAction] = useMutation<
SaveDocumentMutationResponse,
SaveDocumentMutation
>(saveDocumentMutation);
const [, deleteDocumentAction] = useMutation<
DeleteDocumentMutationResponse,
DeleteDocumentMutation
>(deleteDocumentMutation);
const [, login] = useMutation(
loginMutation
);
const [, createUser] = useMutation<
CreateUserMutationResponse,
CreateUserMutation
>(createUserMutation);
const documents: PubDocument[] | null = React.useMemo(
() => documentsWithEditorState(get("documents")(docsData)),
[docsData]
);const [{ data: docsData }, refreshDocsData] = useQuery({
query: documentsQuery,
requestPolicy: "network-only",
});
const [, saveDocumentAction] = useMutation<
SaveDocumentMutationResponse,
SaveDocumentMutation
>(saveDocumentMutation);
const [, deleteDocumentAction] = useMutation<
DeleteDocumentMutationResponse,
DeleteDocumentMutation
>(deleteDocumentMutation);
const [, login] = useMutation(
loginMutation
);
const [, createUser] = useMutation<
CreateUserMutationResponse,
CreateUserMutation
>(createUserMutation);
const documents: PubDocument[] | null = React.useMemo(
() => documentsWithEditorState(get("documents")(docsData)),
[docsData]
);
const user: PubUser | null = get("currentUser")(currentUserData) || null;
const dataLoaded = !!documents;
const [
currentDocument,
setCurrentDocument,
] = React.useState(null);
const [export const NewTodo: FC = () => {
const [value, setValue] = useState('');
const [addTodoMutation, executeAddTodoMutation] = useMutation(AddTodo);
function addTodo() {
executeAddTodoMutation({ text: value });
setValue('');
}
return (
<div>
<input value="{value}" required="" type="text"> setValue(e.target.value)}
/>
</div>export const Home: FC = () => {
const [res, executeQuery] = useQuery({ query: TodoQuery });
const refetch = useCallback(
() => executeQuery({ requestPolicy: 'network-only' }),
[executeQuery]
);
const [toggleTodoMutation, executeToggleTodoMutation] = useMutation(
ToggleTodo
);
const [deleteTodoMutation, executeDeleteTodoMutation] = useMutation(
DeleteTodo
);
const todos = useMemo(() => {
if (res.fetching || res.data === undefined) {
return ;
}
if (res.error) {
return {res.error.message};
}
return (urql
A highly customizable and versatile GraphQL client for React
