5

Trying out GraphQL for the first time, and I'd like for one Schema Type to have access to an array of objects within another Schema Type. I'm using local data and lodash to test this before I wire it up to MongoDB. I'm getting a few errors regarding my attempts at it. I know I'm close. Any assistance would be appreciated.

The following was my latest attempt. I accessed the GraphQLList using express-graphql and used GraphQLID to access the second schema.

schema.js

var projects = [
{
    name: "Title 1",
    subtitle: "Subtitle 1",
    summary: "Lorem ipsum....",
    languageId: ["4", "2"],
    id: "1"
},
...

var languages = [
{ name: "Javascript", id: "1" },
{ name: "HTML", id: "2" },
{ name: "CSS", id: "3" },
{ name: "Python", id: "4" },
]
...

const ProjectType = new GraphQLObjectType({
name: 'Project',
fields: () => ({
    id: { type: GraphQLID },
    name: { type: GraphQLString },
    subtitle: { type: GraphQLString },
    summary: { type: GraphQLString },
    languages: {
        type: new GraphQLList(GraphQLID),
        resolve(parent, args) {
            console.log(parent)
            return _.find(languages, { id: parent.languageId })
        }
    }
})
});

const LanguageType = new GraphQLObjectType({
name: 'Language',
fields: () => ({
    id: { type: GraphQLID },
    name: { type: GraphQLString },
     })
});

//Root Queries
const RootQuery = new GraphQLObjectType({
name: 'RootQueryType',
fields: {
    project: {
        type: ProjectType,
        args: { id: { type: GraphQLID } },
        resolve(parent, args) {

           return _.find(projects, { id: args.id });
        }
    },
    language: {
        type: LanguageType,
        args: { id: { type: GraphQLID } },
        resolve(parent, args) {

            return _.find(languages, { id: args.id })
          }
        }
    }
});

The intention was to bring up a list of languages used in that project in Graphiql that would look something like this...

    {
    "data": {
    "project": {
      "name": "Project 1"
      languages{
          names{
             "Python"
             "HTML" 
              }
            }
         }
        }
       }

Instead I'm getting the following...

    {
  "errors": [
    {
      "message": "Syntax Error: Expected Name, found }",
      "locations": [
        {
          "line": 7,
          "column": 7
        }
      ]
    }
  ]
}

I reformatted the resolve to hard code an array of languages, and that works, but it's not functional. Any suggestions would be greatly appreciated. Thank you all for your time.

Aaron Toliver
  • 187
  • 1
  • 3
  • 16

2 Answers2

2

I'm not sure what query you're trying to make. But in order to return Languages nested in Projects, you should change the return type of the languages field.

Something like:

const ProjectType = new GraphQLObjectType({
    name: 'Project',
    fields: () => ({
        id: {type: GraphQLID},
        name: {type: GraphQLString},
        subtitle: {type: GraphQLString},
        summary: {type: GraphQLString},
        languages: {

            // change this type to LanguageType
            type: new GraphQLList(LanguageType),
            resolve(parent, args) {
                // No need to lodash here
                return languages.filter((language) => {
                    return  parent.languageId.includes(language.id)
                })
            }
        }
    })
});
Marco Daniel
  • 5,467
  • 5
  • 28
  • 36
  • That certainly got me closer. I'm now getting the following response in GraphiQL `{ "data": { "project": { "name": "Title 1", "summary": "Summary 1", "languages": [] } } }` The array is still empty though. I tried reformatting the dummy data so that the languages category was an array of objects. Still turned up empty, but the console log returned everything just fine. – Aaron Toliver Feb 13 '19 at 21:32
  • I'm currently attempting to reverse the one-to-many relationship in the schema, so instead of relating one project to many languages, I'd have one language to many projects. However, I feel like that's the wrong way to go as it will have adverse consequences on the front-end. – Aaron Toliver Feb 13 '19 at 23:47
  • Hey @AaronToliver, I update my answer. There was a problem on fetching the languages. There's no need to use lodash there, a simple filter does the work. – Marco Daniel Feb 14 '19 at 06:29
  • Thank you @MarcoDaniels. It's console logging perfectly now. I think I'm using the query wrong in GraphiQL, but I'll check out the documentation. Many thanks! – Aaron Toliver Feb 14 '19 at 22:55
2

I had a problem with an old project for my tags. in the end, I found it by try and catch u can use this tags: {type: GraphQLList(GraphQLString)},

Nima Malaeri
  • 37
  • 1
  • 6