I'm trying to figure out how to run mutations using Apollo Client.
Here's the mutation I'm trying to run:
export const CREATE_POST = gql`
mutation CreatePost($title: String) {
createPost(
title: $title
body: "Test body, whatever..."
) {
title
body
slug
}
}
`
Here's the functional component that renders a form, and tries to run this mutation once I submit the form:
export default function post() {
const [createPost] = useMutation(CREATE_POST)
async function handleSubmit(event) {
event.preventDefault()
const { data } = await createPost({
variables: { title: "test title" }
})
}
return (<rendering the form here>)
}
I'm getting an error:
[GraphQL error]: Message: Variable "$title" of type "String" used in position expecting type "String!".
If I remove the $title variable from here: mutation CreatePost($title: String) {, the error disappears. It seems like I'm failing to pass it the variable. But as far as I can tell, this part of the code is correct:
const { data } = await createPost({
variables: { title: "test title" }
})
That's how you're supposed to pass variables to mutations, right? What am I doing wrong? How can I debug this?
The full code for the component is here
Query code is here
Solved it thanks to #xadm.
Had to use mutation CreatePost($title: String!) instead of mutation CreatePost($title: String).
Related
could anyone please help me understand on how to validate the input argument object type on apollo client , i am trying to make sure that passing additional fields on the input object fails the query . But it works even if i pass additional fields (Note : I want the validation on front end and not on the server)
const mutationInput = new GraphQLObjectType({
name: 'mutationInput',
fields: {
Id: String,
statusCode: String,
}
});
const GET_DATA = gql`
mutation($in: ${mutationInput}!){
getData(in: $in) {
status
}
}
}`;
//usage
const [getData, { error,loading }] = useMutation(
GET_DATA,
{
...
}
)
getData({
variables: {
in: {
statusCode:"OK",
ID:"azz12",
extraField:"some value" //Validation needs to fail as this field is not defined on input object, but never fails on front end
}
}
I'm getting the following error despite the mutation being wrapped in the gql tag:
Invariant Violation: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag? http://docs.apollostack.com/apollo-client/core.html#gql
This issue is only caused by the mutation code below, I have a query that works.
Code:
<script>
import gql from 'graphql-tag'
export default {
apollo: {
createTask: {
mutation: gql`
mutation Task(
$taskName: String!
$taskDesc: String!
) {
setSession(
taskName: $taskName
taskDesc: $taskDesc
) {
id
taskName
}
}
`,
variables() {
return {
taskName: this.res.data.task_name,
taskDesc: this.res.data.task_description,
}
},
},
},
data() {
return {
createTask: '',
}
},
}
<script>
Smart queries are declared using the apollo object and are ran when the component mounts. If you have queries that you'd like to run this way, then your code would look something like this:
export default {
apollo: {
someQuery: gql`...`,
}
}
However, when working with mutations, you generally don't want to run them on mount. Instead, you want to execute the mutation in response to some user action, like a button click. So the above syntax won't work for mutations. Instead, you need to call this.$apollo.mutate directly inside one of your methods:
export default {
methods: {
createTask() {
this.$apollo.mutate({
mutation: gql`...`,
variables: {...},
// other options
}).then(result => {
// do something with the result
})
}
}
}
I had this problem recently and it was because of an issue with an async import
I am using vue-apollo
async account () {
return {
query: (await import('src/modules/accounts/graphql/accounts.list.query.gql')),
......
I just had to replace that import with a require and it was happy again.
async account () {
return {
query: require('src/modules/accounts/graphql/accounts.list.query.gql'),
......
Amplify automatically generates mutations for delete like this:
export const deleteTodo = /* GraphQL */ `
mutation DeleteTodo($input: DeleteTodoInput!) {
deleteTodo(input: $input) {
index
body
hasRead
}
and this is how I call it in my App.js
await API.graphql(graphqlOperation(mutations.deleteTodo, {input: result}));
It returns an error like this. Seems like the data has not been passed
message: "The variables input contains a field name 'index' that is not defined for input object type 'DeleteTodoInput' "
I'm not sure what result is but you can try:
const result = {
index: 1,
body: 'blabla',
hasRead: true,
}
await API.graphql(graphqlOperation(mutations.deleteTodo, {input: { ...result }}));
Problem is with the result variable. It should be {result} and it should have the index. Incase you dont have index remove it from the query
const deleteTodo = /* GraphQL */ `
mutation DeleteTodo($input: DeleteTodoInput!) {
deleteTodo(input: $input) {
body
hasRead
}
await API.graphql(graphqlOperation(mutations.deleteTodo, {input: {result}));
I'm using the request-promise library to make http request to a graphql server. To achieve a query, I'm doing this:
const query = `
{
user(id:"123173361311") {
_id
name
email
}
}
`
const options = {
uri: "http://localhost:5000/graphql",
qs: { query },
json: true
}
return await request(options)
The above code is working fine. However I'm confused about how to go about a mutation since I need to specify both the actual mutation and the inputData like this:
// Input
{
name: "lomse"
email: "lomse#lomse.com"
}
const mutation = `
mutation addUser($input: AddUserInput!){
addUser(input: $input) {
_id
name
email
}
}
`
const option = {
uri: "http://localhost:5000/graphql",
formData: {mutation},
json: true,
// how to pass the actual data input
}
request.post(option)
Or is it that the request-promise library isn't designed for this use case?
Use body, not formData. Your body should consist of three properties:
query: The GraphQL document you're sending. Even if the operation is a mutation, the property is still named query.
variables: A map of your variable values serialized as a JSON object. Only required if your operation utilized variables.
operationName: Specifies which operation to execute. Only required if your document included multiple operations.
request.post({
uri : '...',
json: true,
body: {
query: 'mutation { ... }',
variables: {
input: {
name: '...',
email: '...',
},
},
},
})
The graphql-request library seems to do what I needed the request-promise library to do.
import { request } from 'graphql-request'
const variables = {
name: "lomse",
email: "lomse#lomse.com"
}
const mutation = `
mutation addUser($input: AddUserInput!){
addUser(input: $input) {
_id
name
email
}
}
`
response = await request(uri, mutation, {input: variables})
I have a simple query which takes in an ID parameter, but it is not working. It says "TypeError: Cannot read property 'taskId' of undefined" . So I think it does not recognize the 'this' keyword for some reason.
Please take a look:
Apollo query from frontend component:
getCommentsByTask: {
query: GET_COMMENTS_BY_TASK,
variables: {
taskId: this.taskId
},
result({ data }) {
this.getComments = data;
console.log("data", data);
}
}
Defined the query in frontend:
query GET_COMMENTS_BY_TASK($taskId: ID!) {
getCommentsByTask(taskId: $taskId) {
id
parentId
ownerId
text
}
}
Resolver in server:
async getCommentsByTask (_, {taskId}, context) {
const userId = getUserId(context)
const user = await User.findById(userId)
if (!user) return
const comments = await Comment.findById(taskId)
return comments
}
Schema:
type Query {
getCommentsByTask(taskId: ID!): [Comment]
}
Assuming that's a smart query, variables should be a (regular, non-arrow) function if you need access to this.