Develop Reference

Add custom GraphQL resolvers and types into Prisma/Nexus schema

Using: TypeScript, Prisma, MySQL, GraphQLServer, ApolloClient, building schema this way:
const schema = makePrismaSchema({
// Provide all the GraphQL types we've implemented
types: [Query, Mutation, User, Post],...
And then:
const server = new GraphQLServer({
schema,
context: { prisma }
});
How to combine that with custom resolvers and types unrelated to the SQL?
(I would like to call some REST endpoint by the GQL as well)

While nexus was created to be used alongside prisma, it's really just a schema builder. You could easily use it to create a schema without even utilizing Prisma. For example:
export const User = prismaObjectType({
name: 'User',
definition(t) {
t.list.field('comments', {
type: 'Comment',
resolve(root, args, ctx) {
return getComments();
},
});
},
})
export const Comment = prismaObjectType({
name: 'Comment',
definition(t) {
t.string('body');
},
})
Here getComments can return an array of comment objects, or a Promise that resolves to one. For example, if you're calling some other API, you'll normally return a Promise with the results of the call. As shown above, the resolver exposes the parent value, the field's arguments and a context object -- you can use any of this information in determining how to resolve a particular field.

Ember.js: Converting vanilla array into Ember array not working

I have an array that I'm converting to Ember array with A() as I want to use some of Ember array methods, like filterBy(), but it's not producing the result I want. What is the proper way to convert a vanilla array into an Ember array?
Ember:
import Component from '#ember/component';
import { computed } from '#ember/object';
import { A } from '#ember/array';
export default Component.extend({
movieGenreIds: computed.map('movies', function(movie, index) {
return movie.genre_ids;
}),
genresNames: computed('movieGenreIds', 'allGenres', function() {
let genresArray = A(this.get('genres')); // <--- conversion here
this.get('movieGenreIds').forEach((movieGenreId, movieGenreIndex) => {
console.log('MOVIE_GENRE_IDS!!!', genresArray);
console.log('FILTERBY ID^^^', genresArray.filterBy('id', movieGenreIds.toString())); // <-- not returning desired results
});
}),
});
Ember route (data is from themoviedb api and models represent the data structure in the json provided):
import Route from '#ember/routing/route';
import RSVP from 'rsvp'
export default Route.extend({
model() {
return RSVP.hash({
movies: this.store.findAll('movie'),
genres: this.store.findAll('genre'),
})
.then(data => data);
},
});

Okay, first .then(data => data); makes literally nothing. Just remove this.
Next if you don't disable the prototype extension for Arrays you dont need to convert normal arrays to ember arrays. so replace this:
let genresArray = A(this.get('genres'));
with this:
let genresArray = this.get('genres');
or this in ember 3.1+:
let genresArray = this.genres;
Now an interesting question is, what is genre_ids on the movie model? I strongly assume its a computed property that returns an array. But some code would help.
However your dependency key for movieGenreIds is wrong. You probably should do this:
movieGenreIds: computed.map('movies.#each.genre_ids', function(movie, index) {
return movie.genre_ids;
}),
However your actual problem is now probably that this will probably return an array of arrays. So something like this:
[[1,2],[3],[],[4,5]]
Now you do .forEach on it, however movieGenreId will now probably still be an array. Next you do movieGenreId.toString() (you actually do movieGenreIds.toString(), but I assume this is a typo, because this wouldn't make sense because you don't use movieGenreId inside the loop then). However doing .toString() on an array will probably not give you the desired result - an id.
And so probably your fix is to fix the movieGenreIds CP (the code is for ember 3.1+):
movieGenreIds: computed('movies.#each.genre_ids', function() {
return this.movies
.map(m => m.genre_ids)
.reduce((a, b) => [...a, ...b]);
}),

Dispatch Redux action after React Apollo query returns

I'm using React Apollo to query all records in my datastore so I can create choices within a search filter.
The important database model I'm using is Report.
A Report has doorType, doorWidth, glass and manufacturer fields.
Currently when the query responds, I'm passing allReports to multiple dumb components which go through the array and just get the unique items to make a selectable list, like so..
const uniqueItems = []
items.map(i => {
const current = i[itemType]
if (typeof current === 'object') {
if (uniqueItems.filter(o => o.id !== current.id)) {
return uniqueItems.push(current)
}
} else if (!uniqueItems.includes(current)) {
return uniqueItems.push(current)
}
return
})
Obviously this code isn't pretty and it's a bit overkill.
I'd like to dispatch an action when the query returns within my SidebarFilter components. Here is the query...
const withData = graphql(REPORT_FILTER_QUERY, {
options: ({ isPublished }) => ({
variables: { isPublished }
})
})
const mapStateToProps = ({
reportFilter: { isPublished }
// filterOptions: { doorWidths }
}) => ({
isAssessment
// doorWidths
})
const mapDispatchToProps = dispatch =>
bindActionCreators(
{
resetFilter,
saveFilter,
setDoorWidths,
handleDoorWidthSelect
},
dispatch
)
export default compose(connect(mapStateToProps, mapDispatchToProps), withData)(
Filter
)
The Redux action setDoorWidths basically does the code above in the SidebarFilter component but it's kept in the store so I don't need to re-run the query should the user come back to the page.
It's very rare the data will update and the sidebar needs to change.
Hopefully there is a solution using the props argument to the graphql function. I feel like the data could be taken from ownProps and then an action could be dispatched here but the data could error or be loading, and that would break rendering.
Edit:
Query:
query ($isPublished: Boolean!){
allReports(filter:{
isPublished: $isPublished
}) {
id
oldId
dbrw
core
manufacturer {
id
name
}
doorWidth
doorType
glass
testBy
testDate
testId
isAssessment
file {
url
}
}
}

While this answer addresses the specific issue of the question, the more general question -- where to dispatch a Redux action based on the result of a query -- remains unclear. There does not, as yet, seem to be a best practice here.

It seems to me that, since Apollo already caches the query results in your store for you (or a separate store, if you didn't integrate them), it would be redundant to dispatch an action that would also just store the data in your store.
If I understood your question correctly, your intent is to filter the incoming data only once and then send the result down as a prop to the component's stateless children. You were on the right track with using the props property in the graphql HOC's config. Why not just do something like this:
const mapDataToProps = ({ data = {} }) => {
const items = data
const uniqueItems = []
// insert your logic for filtering the data here
return { uniqueItems } // or whatever you want the prop to be called
}
const withData = graphql(REPORT_FILTER_QUERY, {
options: ({ isPublished }) => ({
variables: { isPublished }
}),
props: mapDataToProps,
})
The above may need to be modified depending on what the structure of data actually looks like. data has some handy props on it that can let you check for whether the query is loading (data.loading) or has errors (data.error). The above example already guards against sending an undefined prop down to your children, but you could easily incorporate those properties into your logic if you so desired.

Having trouble converting schema from Normalizr v2 to v3

I just updated to normalizr version 3.1.x so I can utilize the denormalization. Though they've significantly changed their API. I'm having trouble transferring my schemas over.
import { normalize, Schema, arrayOf, valuesOf } from 'normalizr';
const usersSchema = new Schema('users')
const photosSchema = new Schema('photos')
const phonesSchema = new Schema('phones')
photosSchema.define({
users: arrayOf(usersSchema)
})
phonesSchema.define({
users: arrayOf(usersSchema)
})
usersSchema.define({
photos: valuesOf(photosSchema),
phones: valuesOf(phonesSchema)
})
That was my existing schema for users. I was also using the redux-normalizr middleware inside my redux action, so I connected the schema to my action like this:
import { usersSchema } from '../normalizrSchemas/usersSchemas.js'
import { arrayOf } from 'normalizr'
export function getUsers(data) {
return {
type: 'GET_USERS',
payload: data,
meta: {
schema : arrayOf(usersSchema)
}
}
}
This was my first attempt to convert the schema over. It doesn't seem you can call schema.Array the same way you could using arrayOf, so I thought I needed to move the array call into the schema.
import { schema } from 'normalizr';
const photos = new schema.Entity('photos')
const phones = new schema.Entity('phones')
const user = new schema.Entity('user', {
photos: [photos],
phones: [phones]
})
const users= new schema.Array('users', user)
export { users }
the action is the same, but i've removed wrapping the schema in arrayOf. All of the users data is just getting dumped into results without any normalization. The data is a list of user object, and each object contains an id, which normalizr should pick up. I'm struggling to figure out how to get normalizr the identify that it's an array of object I think.

schema.Array does not accept a key string name (docs). The first argument should be the schema definition. So instead of
const users= new schema.Array('users', user)
You should use:
const users = new schema.Array(user)
Or, you could just use the shorthand for an array of a single entity type:
const users = [ user ];

Immutable.js deleteIn not working

I have been trying to solve this problem, but there is probably something of Immutable.js that I don't catch. I hope somebody can help me to understand.
I have a test like this:
import {List, Map} from 'immutable';
import {expect} from 'chai';
import {setInitial,
addAtListOfMembers,
removeAtListOfMembers
} from '../src/core';
describe('removeAtListOfMembers', () => {
it('remove a member to the list of members', () => {
const state = Map({
removing: 3,
infos : Map(),
members: Map({
1:Map({
userName:'René',
date:'12/02/2016'
}),
2:Map({
userName:'Jean',
date:'10/03/2016'
}),
3:Map({
userName:'Elene',
date:'05/01/2016'
})
})
});
const nextState = removeAtListOfMembers(state);
expect(nextState).to.equal(Map({
infos : Map(),
members: Map({
1:Map({
userName:'René',
date:'12/02/2016'
}),
2:Map({
userName:'Jean',
date:'10/03/2016'
})
})
}));
});
});
});
...witch tests this funtion:
export function removeAtListOfMembers(state) {
const members = state.get('members');
const removing = state.get('removing');
return state
.deleteIn(['members'], removing)
.remove('removing');
}
but it doesn't work. I have tryed everything.... changing the line to make it work, but I don't get the item number 3 deleted.
What's wrong? Somebody to help me?

This should work:
export function removeAtListOfMembers(state) {
const members = state.get('members');
const removing = state.get('removing');
return state
.deleteIn(['members', String(removing) ])
.remove('removing');
}
Your code has two issues:
deleteIn takes a single keyPath argument, which in your case is [ 'members' ]. The second argument (removing) is ignored, so the result is that the entire members map is deleted; instead, removing should become part of the key path.
removing is a Number, but because you're creating a Map from a JS object, its keys will be String's (this is mentioned in the documentation as well):
Keep in mind, when using JS objects to construct Immutable Maps, that JavaScript Object properties are always strings
So you need to convert removing to a String when passing it to deleteIn.