const MUTATION_QUERY = gql`
mutation MUTATION_QUERY(
$name: bigint!
) {
insert_name(
objects: {
name: $name
}
) {
returning {
id
name
}
}
}
`;
const [onClick, { error, data }] = useMutation<{}, {}>(MUTATION_QUERY, {
variables: {
name: 1234,
},
});
My mutation query is inserting name in my table and autogenerating the id. On console logging the data variable I can view the fields id and name in the data object. But I am not able to access them them individually. How can I console.log "id". Thank you.
the console.log(data) looks like : {insert_name: {...}}
which expands to :
insert_name:
returning: Array(1)
0: {id: 1, name: 1234}
length: 1
_proto_: Array(0)
_typename: "insert_name_mutation_response
You can access the fields of an object with .
For example, if your object looks like this -
data = {
id: 1,
name: 'Jane',
}
You can get just the id with data.id
This works no matter how many layers deep your object may go, so take this example -
data = {
person: {
id: 1,
name: 'Jane',
}
}
You could get the id of person with data.person.id.
console.log(data.insert_name.returning[0].id) will give you the id returned.
For it to work in typescript we need to change the query to add the return type of data
const [onClick, { error, data }] = useMutation<{ReturnInsertNameProps}, {}>(MUTATION_QUERY, {
variables: {
name: 1234,
},
});
interface ReturnInsertNameProps {
insert_name: ReturnQueryProps;
}
interface ReturnProps {
returning: MessageProps[];
}
interface NameProps {
id: number;
name: number;
}
We can also use onCompleted method provided in useMutation if we want to process the result of the query.
Related
Here I am trying to modify my data over the iteration and send some result to API call.
The API Call receives a request with a structured data format which is
{ list: [{ id: "1", name: "Hello" }, ... ] }
Somehow I managed to call the API with single data ( const params in my current code, it only accepts single data).
But now it has to be done with multiple data something like this:
{ list: [{ id: "1", name: "Hello" }, { id: "22", name: "Ed" }, { id: "36", name: "Jason" } ... ] }
Here is my current code
const [table, setTalbe] = useState(..); // assume, we have some table data here
const processNow = () => {
let id = 0;
let name = '';
// if table length is greater than 1, we go for the loop.
if (table.length >= 1) {
table.map(data => {
id = data.userId;
name = data.userName;
});
//insert table data to params, here I want to add whole table data into "list"
//the final result of this list should be something like this
//ex ) list: [{ id: '123', name: 'Josh' }, { id: '125', name: 'Sue' }, { id: '2222', name: 'Paker' } ...],
// but how??
const params: any = {
list: [
{
id: id,
name: name
},
],
};
//send PUT reqeust with params
axios
.put(
'/api/v1/tosent',
params,
)
.then(res => {
console.log('The response', res);
})
.catch(err => {
console.log('The error: ', err);
});
}
};
but I'm stuck with it, please help me to finish this code to work properly.
need your kind advice.
Array.prototype.map returns a new array with the function you pass applied to every element. You should study the MDN documentation on map to understand its use.
Your current code does nothing with the map return value:
table.map(data => {
id = data.userId;
name = data.userName;
});
You probably assumed .map would mutate the data, as in change it in place. Instead, the whole operation returns a new array.
It looks like you want to do:
const list = table.map(data => {
return {
id: data.userId,
name: data.userName
}
});
This is applying a function to every element in the array that will map each element to a new object, matching your question, with an id and name key. Then it looks like you want to pass the returned value of map (which we named list above) to your call:
const params: any = {
list: list
};
I'm trying to make an update two fields to Postgres database:
const update_din_times_for_rep = gql`
mutation update_din_times_for_rep(
$id: Int!
$name: String
$val: String
) {
update_din_times_for_rep(id: $id, name: $name, val: $val) {
id
}
}
`;
Next:
const [data_din_times_for_rep, { loading:loadingMutation, error:errorMutation }] = useMutation(update_din_times_for_rep);
And handler with action:
let handlerMutation = () => {
data_din_times_for_rep({ variables: { id } });
}
<Button onClick={handlerMutation}>Test!</Button>
Seems the mistake in resolvers.js, but tried out much, no result:
update_din_times_for_rep: (parent, args) => {
const mytmp = {
id: args.id,
name: args.name,
val: args.val,
}
return Time_windows
}
How can I make the resolver simple as possible? The only resolver part is difficult now for me, please any advises? The resolver was written by another person, I need to modify it for my case.
Update.
How to change a resolver.js in order it will write a data to db? One modification I did:
update_din_times_for_rep: (parent, args) => {
const mytmp = {
id: args.id,
name: args.name,
val: args.val,
}
return Time_windows
}
But I can't understand what to do exactly next, I tried to follow several examples found on the web. Most of them is working with just arrays or objects, or flat db files on disk. There is no examples where clearly showing the way to handle mutation to real postgres database as react->resolver-schema-tables-update db.
In my case I did properly react->schema-tables. But not a resolver part. My schema which declared as query and mutation in type Query and type Mutation parts:
type Time_windows {
id: Bigint
name: String
val: String
}
After many tries I found a minimal working code:
update_din_times_for_rep: async (parent, args) => {
const mytmp = { id: args.id,
name: args.name,
val: args.val,
}
await client.query("insert into din_times_for_rep (id, val) values ($1, $2)", [mytmp.id, mytmp.name]);
}
Would be good if anyone add comments or impoves.
I have some json data in file called countryData.json structured as so:
{
"info":"success",
"stats":
[{
"id":"1",
"name":"USA",
"type":"WEST"
},
//...
I'm using graphQL to access this data. I have created an object type in the schema for countries using the following:
const CountryType = new GraphQLObjectType({
name: "Country",
fields: () => ({
id: { type: GraphQLID },
name: { type: GraphQLString },
type: { type: GraphQLString },
})
});
I want to write a query that will allow me to access all of the elements of this array that have a certain "name" value(There can be multiple with the same name). I've written the following query, but it only returns the first match in the array:
const RootQuery = new GraphQLObjectType({
name:"RootQueryType",
fields:{
country: {
type: CountryType,
args: { type: { name: GraphQLString } },
resolve(parent, args){
return _.find(countryData.stats, {name: args.name});
}
}
}
});
The "_" comes from const _ = require('lodash');
Also, how can I just get every single item in the array?
I have not recreated the code, therefore I can not check if it would be executed correctly. This is code, that should work in my opinion (without trying). If you want to return array of elements you need to implement https://lodash.com/docs/#filter. Filter will return all objects from stats, which match the argument name. This will return correctly inside resolver function, however, your schema needs adjustments to be able to return array of countries.
You need probably rewrite the arguments as follows as this is probably not correct. You can check out how queries or mutation arguments can be defined https://github.com/atherosai/express-graphql-demo/blob/feature/2-json-as-an-argument-for-graphql-mutations-and-queries/server/graphql/users/userMutations.js. I would rewrite it as follows to have argument "name"
args: { name: { type: GraphQLString } }
You need to add GraphQLList modifier, which defines, that you want to return array of CountryTypes from this query. The correct code should look something like this
const RootQuery = new GraphQLObjectType({
name:"RootQueryType",
fields:{
country: {
type: CountryType,
args: { name: { type: GraphQLString } },
resolve(parent, args){
return _.find(countryData.stats, {name: args.name});
}
},
countries: {
type: new GraphQLList(CountryType),
args: { name: { type: GraphQLString } },
resolve(parent, args){
return _.filter(countryData.stats, {name: args.name});
}
}
}
});
Now if you call query countries, you should be able to retrieve what you are expecting. I hope that it helps. If you need some further explanation, I made the article on implementing lists/arrays in GraphQL schema as I saw that many people struggle with similar issues. You can check it out here https://graphqlmastery.com/blog/graphql-list-how-to-use-arrays-in-graphql-schema
Edit: As for the question "how to retrieve every object". You can modify the code in resolver function in a way, that if the name argument is not specified you would not filter countries at all. This way you can have both cases in single query "countries".
I'm new to Typescript and I want to write a function that returns the object it receives but with less info.
Let's say I have a Type like that:
type movie = {id: number, title:string, url:string, rating:number}
so I need a function that will receive an array of movies and return it only with id and title.
so if the input is:
[{id:1, title:Wonder Woman, url: www, rating:5},{id:2, title: Super
Man, url:www2, rating:7}]
I need the output to be like that:
[{id:1, title:Wonder Woman},{id:2, title: Super Man}]
Is there an easy way to do that?
You can signal to TS that you're working with part of a type (called a Partial) by using Partial<...>
type Movie = { id: string | number, name: string, url: string }
const movies: Movie[] = [
{ id: 1, name: "Movie A", url: "http://www.google.com" },
{ id: 2, name: "Movie B", url: "http://www.google.com" }
]
function stripUrl ({ id, name }: Movie): Partial<Movie> {
return { id, name }
}
const mMovies = movies.map(stripUrl)
I am using react-apollo on the front-end and graphcool on the backend. I have a mutation that creates a tutorial like so:
const CREATE_TUTORIAL_MUTATION = gql`
mutation CreateTutorialMutation(
$author: String
$link: String
$title: String!
$postedById: ID!
$completed: Boolean!
) {
createTutorial(
author: $author
link: $link
title: $title
postedById: $postedById
completed: $completed
) {
author
link
title
postedBy {
id
name
}
completed
}
}
`
It gets called in a submit handler like so...
this.props.createTutorialMutation({
variables: {
author,
link,
title,
completed: false,
postedById
}
})
Everything works wonderfully.
Now I want to add a set of tags to when I create a new tutorial. I created the input field and connected it so that the tags variable is an array of objects, each with a tag id and the tag text.
If I try and add the tags field to the mutation it needs a scalar type. But there is doesn't seem to be a scalar type for an array of objects.
If I pass the tag variable in as a parameter when I call the mutation how do I fill in the Scalar type field in the mutation ( on line 148 here https://github.com/joshpitzalis/path/blob/graphQL/src/components/Add.js) and in the schema?
I am new to graphQL and I understand that I might be approaching this completely the wrong way. If that is the case, how do I add an array of objects to a mutation in graphQL?
You should add a new Tag type to your schema file and connect it to Tutorial with a new relation:
type Tutorial {
author: String
completed: Boolean
link: String
title: String!
id: ID! #isUnique
createdAt: DateTime!
updatedAt: DateTime!
postedBy: User #relation(name: "UsersTutorials")
tags: [Tag!]! #relation(name: "TutorialTags")
}
type Tag {
id: ID!
tag: String!
number: Int!
tutorials: [Tutorial!]! #relation(name: "TutorialTags")
}
Then you can create a new tutorial and new tags using a nested create mutation like this:
const CREATE_TUTORIAL_MUTATION = gql`
mutation CreateTutorialMutation(
$author: String
$link: String
$title: String!
$tags: [TutorialtagsTag!]!
$completed: Boolean!
$postedById: ID!
) {
createTutorial(
author: $author
link: $link
title: $title
tags: $tags
completed: $completed
postedById: $postedById
) {
author
link
title
postedBy {
id
name
}
completed
tags {
id
text
}
}
}
`
This post gives more background about other approaches and their trade-offs: https://www.graph.cool/forum/t/how-do-i-add-an-array-of-objects-to-a-mutation-in-apollo-react/365/6?u=nilan
What i understand by your requirement is that if you have the following code
const user = {
name:"Rohit",
age:27,
marks: [10,15],
subjects:[
{name:"maths"},
{name:"science"}
]
};
const query = `mutation {
createUser(user:${user}) {
name
}
}`
you must be getting something like
"mutation {
createUser(user:[object Object]) {
name
}
}"
instead of the expected
"mutation {
createUser(user:{
name: "Rohit" ,
age: 27 ,
marks: [10 ,15 ] ,
subjects: [
{name: "maths" } ,
{name: "science" }
]
}) {
name
}
}"
If this is what you wanted to achieve, then gqlast is a nice tag function which you can use to get the expected result
Simply grab the js file from here and use it as:
const user = {
name:"Rohit",
age:27,
marks: [10,15],
subjects:[
{name:"maths"},
{name:"science"}
]
};
const query = gqlast`mutation {
createUser(user:${user}) {
name
}
}`
The result stored in the variable query will be :
"mutation {
createUser(user:{
name: "Rohit" ,
age: 27 ,
marks: [10 ,15 ] ,
subjects: [
{name: "maths" } ,
{name: "science" }
]
}) {
name
}
}"