How to create field resolver on RedwoodJS - redwoodjs

RedwoodJS automatically maps GraphQL queries resolvers to api/src/services. How do I create a field resolver for a given GraphQL type?
Suppose I have this schema:
type Person {
name: string!
birthDate: DateTime!
age: Int!
}
But only name and birthDate are stored in the database.
Using graphql-tools I would write my resolvers like this:
const resolvers = {
Query: { ... },
Mutation: { ... },
Person: {
age(person) {
return new Date().getFullYear() - person.birthDate.getFullYear();
},
},
};
PS: I know the age formula is wrong.
PS2: I'm using age here for the sake of simplicity, imagine this is expensive to compute or get from database.

It's almost identical to the way you do it with graphql-tools.
You export an object with the same name as your type in your service:
// services/person.js
export const Person = {
age: (_args, { root }) {
return new Date().getFullYear() - root.birthDate.getFullYear();
},
}
As an aside, you could also export a resolvers in the person.sdl.js file (But services take precendence):
// graphql/person.sdl.js
export const schema = gql`/* ... */`
export const resolvers = {
Query: {},
Mutation: {},
Person: {},
}

Edit: I misunderstood the question, this answer just covers creating query + mutation resolvers, not a resolver for a computed field.
To create a field resolver, you'll need to decide whether you're creating a resolver for a query, or a handler for a mutation.
We can use the following schema as an example:
export const schema = gql`
type Person {
id: String!
name: String!
age: Int!
}
type PersonInput {
name: String
age: Int
}
type Mutation {
createPerson(input: PersonInput!): Person
}
type Query {
people: [Person]
person(id: String!): Person
}
`
If the above schema is stored in a file called persons.sdl.js, in the api/src/graphql directory, you can implement the queries and mutations in a file called persons.js in the api/src/services/persons directory.
// implements Mutation.createPerson(...)
export const createPerson({ input }) => {
return db.person.create({
data: input
})
}
// implements Query.people
export const people = () => {
return db.person.findMany()
}
// implements Query.person(...)
export const person = ({ id }) => {
return db.person.findOne({
where: { id }
})
}

Related

PUT/Update/Delete item in nested Appsync array. React, useReducer, Apollo

I have an object in my schema which has an array like so:
type Foo #aws_cognito_user_pool {
id: ID!
name: String
comments: [Comment]
createdAt: AWSDateTime
}
the input and Comment Type look like so:
input FooInput #aws_cognito_user_pool {
name: String
comments: [CommentInput]
}
type Comment #aws_cognito_user_pool {
id: String
body: String
parent: String
createdAt: String
}
input CommentInput {
id: String
body: String
parent: String
createdAt: String
}
In my app I am using useReducer to manage state and apollo.
My Foo reducer looks like so
const INITIAL_FOO_STATE = () => {
name: "",
comments: [],
}
export const FooReducer = (state, action) => {
switch(action.field) {
case "name":
case "comments":
return {
...state, [action.field]: action.payload,
}
default:
return
}
}
in my component i have the add, update and delete functions like so:
const addComment = (body, parent) => {
CreateComment(
body,
parent,
)
.then((comment) => {
setComments([comment, ...comments]);
setActiveComment(null);
});
};
const updateComment = (body, commentId) => {
UpdateComment(body)
.then(() => {
const updatedComments = comments.map((item) => {
if (item.id === commentId) {
return {
...item,
body: body,
};
}
return item;
})
setComments(updatedComments);
setActiveComments(null);
})
};
const deleteComment = (commentId) => {
if (window.confirm("Are you sure you want to remove this comment?")) {
DeleteComment()
.then(() => {
const updatedComments = comments.filter((comment) => comment.id !== commentId);
setComments(updatedComments)
})
}
};
This works just fine on the frontend, but now want to dispatch these actions to my Foo.comments array on the backend and looking for some help as to the best way without the need of another table.
I was thinking of placing the dispatch's within their respective .then()
For anyone interested, the solution was simple.
I had to modify the comment type in schema to:
type Comment #aws_cognito_user_pool {
id: ID!
sourceId: ID!
body: String
parent: String
createdAt: String
}
input CommentInput {
body: String
parent: String
createdAt: String
}
then add the mutations and resolvers for create, update and delete of the Comment.
In the Foo comment field, a query resolver was needed.
This also meant a new table was needed for comments.
The table needed to have the sourceId as primary key and ID as sort key, with a global index setup on the sourceId
I swapped out the CRUD functions in my component with the appropriate Apollo mutations and done.

GraphQL, ReactJs - unable to retrieve data when passing parameter to Query

I'd like to retrieve the _id of a document in my mongodb database using a graphql query.
Here is my query:
query {
getTeamRegistrationID(teamName:"Patriots") {
_id
}
}
And the result:
{
"data": {
"getTeamRegistrationID": []
}
}
This should return the ObjectID of the document from the mongodb database.
Here's my graphql schema:
const typeDefs = gql`
type TeamRegistration {
_id: ID,
teamName: String
},
type Query {
getTeamRegistrationID(teamName: String): [TeamRegistration]
}`
My resolver:
const resolvers = {
Query: {
getTeamRegistrationID: (parent, teamRegistration) => TeamRegistration.find({ teamName: teamRegistration.teamName })
}
}
I can't figure out what I'm doing wrong here. Is there something I'm missing? Thanks in advance!

Data Relationships and Connection Types with Mutations in Prisma, GraphQL, and Apollo

Sorry for the long post, but I tried to be as detailed as possible.
How can I edit my current model, schema, and resolver to be able to save/connect a related type (Vendor) to my created type (Item) via a web form?
I want to create an inventory item and select a vendor to be associated with that item.
I have a Prisma data model like so (I've other fields for simplicity because I have no trouble saving the other fields; it's just with other types where there is a relation)...
Items may or may not have a vendor associated with them. Vendors may or may not have a list of items currently associated with them.
type Item {
id: ID! #id
name: String!
description: String!
vendor: Vendor
}
type Vendor {
id: ID! #id
items: [Item!]
}
I have a graphql schema like this (compare to modified schema at the end of this question)...
type Mutation {
createItem(
name: String!
description: String!
): Item!
}
My resolver:
async createItem(parent, args, ctx, info) {
const item = await ctx.db.mutation.createItem(
{
data: {
...args,
},
}, info);
return item;
}
My React component contains the following:
const CREATE_ITEM_MUTATION = gql`
mutation CREATE_ITEM_MUTATION(
$name: String!
$description: String!
) {
createItem(
name: $name
description: $description
) {
id
name
description
vendor {
id
}
}
}
`;
const ALL_VENDORS_QUERY = gql`
query ALL_VENDORS_QUERY {
vendors {
id
}
}
`;
Later on down the web page in my HTML form, I have:
<Query query={ALL_VENDORS_QUERY}>
{({ data, loading }) => (
<select
id="vendor"
name="vendor"
onChange={this.handleChange}
value={this.state.vendor}
>
<option>Vendor</option>
{data.vendors.map(vendor => (
<option key={vendor.id} value={vendor.id}>{vendor.name}</option>
))}
</select>
)}
</Query>
I just don't know how to connect the vendor to the item through a form submission. I can get it working if I hard code the vendor id in my resolver like so:
async createItem(parent, args, ctx, info) {
const item = await ctx.db.mutation.createItem(
{
data: {
vendor: {
connect: { id: "ck7zmwfoxg4b70934wx8kgwkx" } // <-- need to dynamically populate this based on user input from the form
},
...args,
},
}, info);
return item;
}
...but that obviously is not what I want.
To me, it makes the most sense to modify my schema like so:
createItem(
name: String!
description: String!
vendor: Vendor <--- added
): Item!
But when I do that I get this:
Error: The type of Mutation.createItem(vendor:) must be Input Type but got: Vendor.
How can I edit my current model, schema, and resolver to be able to save/connect a vendor ID that is selected on the form?
The answer to my problem was found here: How to fix 'Variable "$_v0_data" got invalid value' caused from data types relation - Mutation Resolver
I was spreading the args (...args) while also passing the vendor argument.
Here is my updated mutation:
createItem(
name: String!
description: String!
vendorId: ID
): Item!
and its resolver:
async createItem(parent, {name, description, vendorId}, ctx, info) {
const item = await ctx.db.mutation.createItem(
{
data: {
vendor: {
connect: { id: vendorId }
},
name,
description,
},
}, info);
return item;
}
Boom! 💥

Simple graphQL query gives error

I am trying to use graphql for one of the GET request based on an id. Here's the code:
const { graphql, buildSchema } = require('graphql');
EmployeeService.prototype.getEmployee = function() {
// Construct a schema
const schema = buildSchema(`
type Query {
employee(id="12345") {
id
items {
id
name
}
}
}
`);
// The root provides a resolver function
let root = {
employee: () => id
};
// Run the GraphQL query
graphql(schema, '{ employee }', root).then((response) => {
console.log(response);
});
};
Trying to follow the documentation on http://graphql.org/graphql-js/.
I get a GraphQL error: "Syntax Error GraphQL request (3:19) Expected :, found =↵↵2: type Query {↵3: employee (id="12345") {↵ ^↵4: id↵"
Please advise.
You are maybe mixing things a little bit up. The schema and resolvers are part of your API and are not needed to make a query on a client. Just for demonstration purposes here a valid schema definition (that would normally run on a API server):
let schema = buildSchema(`
type Item {
id: Int!
name: String!
}
type Employee {
id: Int!
items: [Item]
}
type Query {
employee(id: Int!): Employee
}
`);
You then define your types and resolvers (simplified examples):
class Employee {
constructor(id, items) {
this.id = id;
this.items = items;
}
}
let root = {
employee: ({id}) => {
return new Employee(id, [{id: 1, name: 'Item 1'}, {id: 2, name: 'Item2'}]);
}
};
You can then run a query:
const query = `
{
employee(id: 1) {
id,
items {
id,
name
}
}
}
`;
graphql(schema, query, root).then((response) => {
console.log(response.data);
});
To run actual queries against a remote API have a look at GraphQL clients like Apollo or lokka

My query is failing in relay and I don't know why?

I have this simple query which works fine in my Graphql but I cannot pass data using relay to components and I don't know why :(
{
todolist { // todolist returns array of objects of todo
id
text
done
}
}
this is my code in an attempt to pass data in components using relay:
class TodoList extends React.Component {
render() {
return <ul>
{this.props.todos.todolist.map((todo) => {
<Todo todo={todo} />
})}
</ul>;
}
}
export default Relay.createContainer(TodoList, {
fragments: {
todos: () => Relay.QL`
fragment on Query {
todolist {
id
text
done
}
}
`,
},
});
And lastly my schema
const Todo = new GraphQLObjectType({
name: 'Todo',
description: 'This contains list of todos which belong to its\' (Persons)users',
fields: () => {
return {
id: {
type: GraphQLInt,
resolve: (todo) => {
return todo.id;
}
},
text: {
type: GraphQLString,
resolve: (todo) => {
return todo.text;
}
},
done: {
type: GraphQLBoolean,
resolve: (todo) => {
return todo.done;
}
},
}
}
});
const Query = new GraphQLObjectType({
name: 'Query',
description: 'This is the root query',
fields: () => {
return {
todolist: {
type: new GraphQLList(Todo),
resolve: (root, args) => {
return Conn.models.todo.findAll({ where: args})
}
}
}
}
});
This code looks simple and I cannot see why this won't work and I have this error Uncaught TypeError: Cannot read property 'todolist' of undefined, but I configure todolist and I can query in my graphql, you can see the structure of the query is same, I don't know why this is not working?
todolist should be a connection type on Query. Also, your ids should be Relay global IDs. You will not have access to your objects' raw native id fields in Relay.
import {
connectionArgs,
connectionDefinitions,
globalIdField,
} from 'graphql-relay';
// I'm renaming Todo to TodoType
const TodoType = new GraphQLObjectType({
...,
fields: {
id: uidGlobalIdField('Todo'),
...
},
});
const {
connectionType: TodoConnection,
} = connectionDefinitions({ name: 'Todo', nodeType: TodoType });
// Also renaming Query to QueryType
const QueryType = new GraphQLObjectType({
...,
fields: {
id: globalIdField('Query', $queryId), // hard-code queryId if you only have one Query concept (Facebook thinks of this top level field as being a user, so the $queryId would be the user id in their world)
todos: { // Better than todoList; generally if it's plural in Relay it's assumed to be a connection or list
type: TodoConnection,
args: connectionArgs,
},
},
});
// Now, to be able to query off of QueryType
const viewerDefaultField = {
query: { // Normally this is called `viewer`, but `query` is ok (I think)
query: QueryType,
resolve: () => ({}),
description: 'The entry point into the graph',
}
};
export { viewerDefaultField };
The above is not fully complete (you'll likely also need to setup a node interface on one or more of your types, which will require node definitions), but it should answer your basic question and get you started.
It's a huge, huge pain to learn, but once you struggle through it it starts to make sense and you'll begin to love it over RESTful calls.

Resources