I have the following GRAPHQL subscription:
Schema.graphql
type Subscription {
booking: SubscriptionData
}
type SubscriptionData {
booking: Booking!
action: String
}
And this is the resolver subsrciption file
Resolver/Subscription.js
const Subscription = {
booking: {
subscribe(parent, args, { pubsub }, info) {
return pubsub.asyncIterator("booking");
}
}
};
export default Subscription;
Then I have the following code on the Mutation in question
pubsub.publish("booking", { booking: { booking }, action: "test" });
I have the follow subscription file in front end (React)
const getAllBookings = gql`
query {
bookings {
time
durationMin
payed
selected
activity {
name
}
}
}
`;
const getAllBookingsInitial = {
query: gql`
query {
bookings {
time
durationMin
payed
selected
activity {
name
}
}
}
`
};
class AllBookings extends Component {
state = { allBookings: [] }
componentWillMount() {
console.log('componentWillMount inside AllBookings.js')
client.query(getAllBookingsInitial).then(res => this.setState({ allBookings: res.data.bookings })).catch(err => console.log("an error occurred: ", err));
}
componentDidMount() {
console.log(this.props.getAllBookingsQuery)
this.createBookingsSubscription = this.props.getAllBookingsQuery.subscribeToMore(
{
document: gql`
subscription {
booking {
booking {
time
durationMin
payed
selected
activity {
name
}
}
action
}
}
`,
updateQuery: async (prevState, { subscriptionData }) => {
console.log('subscriptionData', subscriptionData)
const newBooking = subscriptionData.data.booking.booking;
const newState = [...this.state.allBookings, newBooking]
this.setState((prevState) => ({ allBookings: [...prevState.allBookings, newBooking] }))
this.props.setAllBookings(newState);
}
},
err => console.error(err)
);
}
render() {
return null;
}
}
export default graphql(getAllBookings, { name: "getAllBookingsQuery" })(
AllBookings
);
And I get the following response:
data: {
booking: {booking: {...} action: null}}
I get that I am probably setting up the subscription wrong somehow but I don't see the issue.
Based on your schema, the desired data returned should look like this:
{
"booking": {
"booking": {
...
},
"action": "test"
}
}
The first booking is the field on Subscription, while the second booking is the field on SubscriptionData. The object you pass to publish should have this same shape (i.e. it should always include the root-level subscription field).
pubsub.publish('booking', {
booking: {
booking,
action: 'test',
},
})
Related
I would like to create small project using GraphqQL, ApolloServer, but I encountered a problem, that I can't solve. I wrote it based on several documentation.
const { ApolloServer, gql } = require('apollo-server');
const { RESTDataSource } = require('apollo-datasource-rest');
const typeDefs = gql`
type Word {
id: ID!
word: String!
translation: String!
}
type Query {
words: [Word]
word(id: ID): Word
}
`;
class WordsAPI extends RESTDataSource {
constructor() {
super();
this.baseURL = 'localhost:5001/'
}
async getWord(id) {
return this.get(`word/${id}`)
}
async getAllWords() {
return this.get('words')
}
async getSpecifiedWords(SpecWord) {
return this.get(`words/${SpecWord}`)
}
}
const resolvers = {
Query: {
words: (_, __, { dataSources }) =>
dataSources.wordsAPI.getAllWords(),
word: async (_source, { id }, { dataSources }) => {
return dataSources.wordsAPI.getWord(id);
}
}
}
const server = new ApolloServer({
typeDefs,
resolvers,
dataSources: () => {
return {
wordsAPI: new WordsAPI()
};
},
context: () => {
return {
};
},
});
server.listen().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});
After
query {
words {
translation
}
}
In playground I am getting Invalid URL: words.
At localhost:5001/words is database and in Postman it works.
What did I bad?
The Query
const GET_MEMBER = gql`
query getMembers {
getMembers #client {
firstname
lastname
__typename
}
}
`
export { GET_MEMBER }
The Resolver:
export default {
resolvers: {
Query: {
getMembers: async (_, variables, { cache }) => {
try {
const res = await apiClient.get('/contacts')
return { ...res.data, __typename: 'Member' }
} catch (e) {
throw e
}
},
},
apiClient is an instance of axios
React App:
<Query query={GET_MEMBER}>
{({ loading, error, data }) => {....
I am getting this warning
and the Query in my React App returns {}
Where should I start to debeg it?
I'm studying GraphQL Mutation components. I'm doing a mutation that adds a resolution, i.e. a New Year's resolution. Here's the schema:
type Resolution {
_id: String!
name: String!
goals: [Goal]
completed: Boolean
}
type Query {
resolutions: [Resolution]
}
type Mutation {
createResolution(name: String!): {
Resolution
user: String
}
}
Here are the resolution resolvers:
import Resolutions from "./resolutions";
import Goals from "../goals/goals";
import { PubSub } from 'graphql-subscriptions';
export const pubsub = new PubSub();
export default {
Query: {
resolutions(obj, args, { userId }) {
return Resolutions.find({
userId
}).fetch();
}
},
Resolution: {
goals: resolution =>
Goals.find({
resolutionId: resolution._id
}).fetch(),
completed: resolution => {
const goals = Goals.find({
resolutionId: resolution._id
}).fetch();
if (goals.length === 0) return false;
const completedGoals = goals.filter(goal => goal.completed);
return goals.length === completedGoals.length;
}
},
Mutation: {
createResolution(obj, { name }, { userId }) {
if (userId) {
const resolutionId = Resolutions.insert({
name,
userId
});
return Resolutions.findOne(resolutionId);
}
throw new Error("Unauthortized");
}
},
};
Here's the user resolver:
export default {
Query: {
user(obj, args, { user }) {
return user || {};
}
},
User: {
email: user => user.emails[0].address
}
};
Here's the mutation component:
const ResolutionForm = () => {
let input;
let state = {
error: null
};
return (
<Mutation
mutation={CREATE_RESOLUTION}
update={(cache, {data: {createResolution}}) => {
const {resolutions} = cache.readQuery({query: GET_RESOLUTIONS});
cache.writeQuery({
query: GET_RESOLUTIONS,
data: {resolutions: resolutions.concat([createResolution])}
});
}}
>
{(createResolution, {data}) => (
<div>
<form
onSubmit={e => {
e.preventDefault();
createResolution({
variables: {
name: input.value
},
});
input.value = "";
}}
>
<input
ref={node => {
input = node;
}}
/>
<button type="submit">Submit</button>
</form>
</div>
)}
</Mutation>
);
};
Here's the query that loads all the resolutions when the app launches:
const GET_RESOLUTIONS = gql`
query Resolutions {
resolutions {
_id
name
completed
goals {
_id
name
completed
}
}
user {
_id
}
}
`;
That works fine, but when I run the mutation:
const CREATE_RESOLUTION = gql`
mutation createResolution($name: String!) {
createResolution(name: $name) {
__typename
_id
name
goals {
_id
name
completed
}
completed
}
}
`;
...I get a console log error saying:
Missing field user in {
"resolutions": [
{
"_id": "GKTNgbuiDgiZ4wAFZ",
"name": "testing 123",
.....
How do I get the field user into my mutation response?
The GET_RESOLUTIONS query used is originally from a parent component, App.js. It really contains two separate queries-- one for the resolution and one for the user. The CREATE_RESOLUTION Mutation query and resolver, don't return user data, and I don't yet know how to get them to do that.
But, the Mutation component doesn't need the user data. It only gets upset during the call to cache.writeQuery because GET_RESOLUTIONS is asking for user, and the Mutation resolver isn't returning user.
So the fix seems to be to have a special GET_RESOLUTIONS_FOR_MUTATION_COMPONENT query that doesn't ask for user in the first place:
const GET_RESOLUTIONS_FOR_MUTATION_COMPONENT = gql`
query Resolutions {
resolutions {
_id
name
completed
goals {
_id
name
completed
}
}
}
`;
[.....]
const {resolutions} = cache.readQuery({query: GET_RESOLUTIONS_FOR_MUTATION_COMPONENT});
[.....]
Using that there is no error message asking for user.
I'm using PostgraphQL (https://github.com/calebmer/postgraphql) with Relay and wired a UpdateQuestionMutation into my app. However, I do not get optimistic updating to work.(When I enable network throttling in chrome I can see that the the optimistic update gets handled but the component still shows the old title).Do I miss something? I have following pieces :
class QuestionClass extends Component<IQuestion, void> {
save = (item) => {
this.props.relay.commitUpdate(
new UpdateQuestionMutation({store: this.props.store, patch: item})
);
this.isEditing = false;
};
public render(): JSX.Element {
const item = this.props.store;
console.log(item);
...
const Question = Relay.createContainer(QuestionClass, {
fragments: {
// The property name here reflects what is added to `this.props` above.
// This template string will be parsed by babel-relay-plugin.
store: () => Relay.QL`
fragment on Question {
${UpdateQuestionMutation.getFragment('store')}
title
description
userByAuthor {
${User.getFragment('store')}
}
}`,
},
});
...
export default class UpdateQuestionMutation extends Relay.Mutation<any, any> {
getMutation() {
return Relay.QL `mutation { updateQuestion }`
}
getVariables() {
console.log(this.props);
return {
id: this.props.store.id,
questionPatch: this.props.patch
}
}
getFatQuery() {
return Relay.QL `fragment on UpdateQuestionPayload { question }`
}
getConfigs() {
return [{
type: "FIELDS_CHANGE",
fieldIDs: {
question: this.props.store.id
}
}]
}
getOptimisticResponse() {
return {
store: this.props.patch
}
}
// This mutation has a hard dependency on the question's ID. We specify this
// dependency declaratively here as a GraphQL query fragment. Relay will
// use this fragment to ensure that the question's ID is available wherever
// this mutation is used.
static fragments = {
store: () => Relay.QL`
fragment on Question {
id
}
`,
};
}
Edit: That's what I see in the postgraphql logs:
mutation UpdateQuestion($input_0: UpdateQuestionInput!) { updateQuestion(input: $input_0) { clientMutationId ...F1 } } fragment F0 on Question { id rowId title description userByAuthor { id rowId username } } fragment F1 on UpdateQuestionPayload { question { id ...F0 } }
Below is my code for adding and removing a person from a group.
For some reason, getOptimisticResponse is not working for this mutation.
Could this be due to having an argument groupId for isInGroup field?
class GroupAddRemovePersonMutation extends Relay.Mutation {
static initialVariables = {
groupId: null,
}
static prepareVariables(prevVars) {
return prevVars;
}
static fragments = {
person: () => Relay.QL`
fragment on Person {
id
isInGroup(groupId: $groupId)
}
`,
}
getMutation() {
return this.props.isInGroup ?
Relay.QL`mutation { groupRemovePerson }` :
Relay.QL`mutation { groupAddPerson }`;
}
getVariables() {
const {groupId, person} = this.props;
return {
personId: person.id,
groupId,
};
}
getCollisionKey() {
const {groupId, person} = this.props;
return `groupPerson_${groupId}_${person.id}`;
}
getFatQuery() {
const {groupId, person, isInGroup} = this.props;
return isInGroup ?
Relay.QL`
fragment on GroupRemovePersonMutationPayload {
person {
id
groups { id }
isInGroup(groupId: "${groupId}")
}
group {
id
person
hasPerson(personId: "${person.id}")
}
}
` :
Relay.QL`
fragment on GroupAddPersonMutationPayload {
person {
id
groups { id }
isInGroup(groupId: "${groupId}")
}
group {
id
person
hasPerson(personId: "${person.id}")
}
}
`;
}
getConfigs() {
const {groupId, person} = this.props;
return [{
type: 'FIELDS_CHANGE',
fieldIDs: {
person: person.id,
group: groupId,
},
}];
}
getOptimisticResponse() {
const {groupId, person, isInGroup} = this.props;
return {
person: {
id: person.id,
isInGroup: !isInGroup,
},
group: {
id: groupId,
hasPerson: !isInGroup,
},
};
}
}
I would try adding the groupId to the optimistic response first. In my experience, the optimistic response has to match the shape of the fat query exactly.
If you don't have the groupIds at the time the optimistic response is generated, you could try substituting temporary values until the response is returned from the server. This scenario occurs often when you are rendering a connection and providing keys to the view to distinguish repeated React elements.