Не могу добавить данные в MongoDB через Apollo Server и GraphQL и отобразить их в gql pg (mutation запрос)
Хотел добавить данные в БД и отобразить их в GraphQL PlayGround с фронта (react + next) через useMutation Hook, используя мутацию и Apollo Server, проблема заключается в том, что когда я делаю запрос и нахожусь на адресе фронта, то данные успешно приходят объектом в Apollo Server, структура мутации правильная, запрос видимо тоже, но когда перехожу на myhost/grapql и описываю мутацию, данные предстают null.
Layout.js - просто шаблон каждой из страниц Next, там инициализирую apolloclient, apolloprovider(в них проблем нет, так как query запросы работают нормально)
import React from 'react'
import Link from 'next/link'
import Head from 'next/head'
import Navbar from './Navbar';
import ApolloClient from 'apollo-boost';
import { onError } from 'apollo-link-error';
import {ApolloProvider} from '@apollo/react-hooks';
const Layout = (props) => (
<ApolloProvider client={client}>
<div>
<Head>
<title>Main</title>
<link href="/Main.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</Head>
<Navbar />
<div style={{margin: '65px'}} className="container">
{props.children}
</div>
</div>
</ApolloProvider>
)
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql',
onError: ({ networkError, graphQLErrors }) => {
console.log('graphQLErrors', graphQLErrors)
console.log('networkError', networkError)
}
})
export default Layout;
Contacts.tsx - фронт, с которого идет useMutation запрос.
import React, {useState} from 'react'
import './Contacts.css';
import Button from '@material-ui/core/Button';
import Modal from 'react-awesome-modal';
import io from 'socket.io-client';
import axios from 'axios';
import gql from 'graphql-tag';
import { ApolloLink, onError } from "apollo-link-error";
import { useQuery, useMutation } from '@apollo/react-hooks';
const Contacts = () => {
const socket = io('http://localhost:4000');
const [open, setOpen] = useState(false);
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const users = gql`
{
users {
name
email
phone
}
}
`;
const add_user = gql`
mutation AddUser($name: String, $email: String, $phone: String) {
AddUser(name: $name, email: $email, phone: $phone) {
name email phone
}
}
`;
const errorLink = onError(({ graphQLErrors }) => {
if (graphQLErrors) graphQLErrors.map(({ message }) => console.log(message))
})
const { loading, data } = useQuery(users);
const [AddUser, {error} ] = useMutation(add_user);
if (error) {
console.log(error)
}
const handleOpen = (): void => {
setOpen(true);
};
const handleClose = (): void => {
setOpen(false);
};
const onSend = (): void => {
let data = {
name: name,
email: email,
phone: phone
}
// socket.on('now', data => {
// alert(data.msg)
// })
socket.emit('email', data)
}
const onApi = (): void => {
let data = {
name: name,
email: email,
phone: phone
}
axios.post('/api', data)
.then((res) => {
console.log(res)})
}
socket.on('data', (data: object) => {
console.log(data)
})
const onGetApi = async () => {
console.log(data)
try {
let res = await axios.get('/api')
console.log(res.data)
} catch (e) {
console.log(e)
}
}
const onSendGQL = () => {
AddUser({variables: {name: name, email: email, phone: phone},
optimisticResponse: true
})
}
return (
<div className="container">
<div className="contacts-headline">Contacts</div>
<ul className="contacts-spec">
<li>
<div className="spec">
Phone<br />
+79134579350
</div>
</li>
<li>
<div className="spec">
Mail<br />
[email protected]
</div>
</li>
<li>
<div className="spec">
Media<br />
https://vk.com/mitrogoga_ru
</div>
</li>
</ul>
<Button onClick={handleOpen} style={{marginTop: '75px'}} variant="contained" color="primary">Consultation</Button>
<Modal width="400" height="300" visible={open} effect="fadeInUp" onClickAway={handleClose}>
<Button onClick={handleClose} variant="contained" color="secondary">×</Button>
<div style={{padding: '25px'}}>
<div>Send me an email</div>
<form style={{display: 'flex', flexDirection: 'column'}}>
<input value={name} onChange={e => setName(e.target.value)} placeholder="name" />
<input value={email} onChange={e => setEmail(e.target.value)} placeholder="email" />
<input value={phone} onChange={e => setPhone(e.target.value)} placeholder="phone" />
<Button onClick={onSend} variant="contained" color="primary">Send</Button>
<Button onClick={onApi} variant="contained" color="primary">Send API</Button>
<Button onClick={onGetApi} variant="contained" color="primary">Get API</Button>
<Button onClick={onSendGQL} variant="contained" color="primary">Send GQL</Button>
</form>
</div>
</Modal>
</div>
);
}
export default Contacts;
Главный кусок кода с next сервака.
const typeDefs = gql`
type User {
id: ID
name: String
email: String
phone: String
}
type Query {
hello: String,
users: [User]
}
type Mutation {
AddUser(name: String, email: String, phone: String): User!
}
`;
const resolvers = {
Query: {
hello: () => 'Hi from Slavus54',
users: async () => {
let data = await Users.find();
return data;
}
},
Mutation: {
AddUser: async (_, {name, email, phone}) => {
let res = {
name: name,
email: email,
phone: phone
}
const user = new Users({
name: res.name,
email: res.email,
phone: res.phone
})
console.log(user)
return user;
}
}
};
const apollo = new ApolloServer({ typeDefs, resolvers });
apollo.applyMiddleware({app});
В итоге объект user отображается в консоли с введенными только тогда, когда нахожусь на фронте, а в gql pg не отображается.
