Nexus2020 Nexus2020 - 3 months ago 15
Javascript Question

Relay setVariables function fail

First of all here is my fragment:



initialVariables: {
limit: 3,
},
fragments: {
app: () => Relay.QL`
fragment on App {
id
personnels(first: $limit) {
pageInfo {
hasNextPage
hasPreviousPage
}
edges {
cursor
node {
name
}
}
}
}
`
}
}





initial read from server works fine, but when I am calling
this.props.relay.setVariables, and trying to set limit variable I always get:

Server request for query
App_AppRelayQL
failed for the following reasons:


  1. globalId is not defined
    node(id:$id_0) {
    ^^^



in the browser console. I think it might have something to do with the schema. But not sure what, so here is my schema:



import {
GraphQLSchema,
GraphQLObjectType,
GraphQLString,
GraphQLInt,
GraphQLList,
GraphQLID,
GraphQLNonNull
} from 'graphql';

import {
nodeDefinitions,
fromGlobalId,
globalIdField,
connectionDefinitions,
connectionFromArray,
connectionArgs,
mutationWithClientMutationId
} from 'graphql-relay';

class App {};
class Personnel {};
let app = new App();
let Personnels = [];

(() => {
let Jason = new Personnel();
let John = new Personnel();

Jason.name = 'Jason';
Jason.id = 1;
John.name = 'John';
John.id = 2;

personnels.push(YangGuoRong);
personnels.push(DengLiFang);
})();


let {nodeInterface, nodeField} = nodeDefinitions(
(gloablId) => {
const {type} = fromGlobalId(globalId);

switch(type) {
case 'App':
return app;
default:
return null;
}
},
(obj) => {
if (obj instanceof App) {
return appType;
} else if (obj instanceof Personnel) {
return personnelType;
} else {
return null;
}
}
);


let getPersonnel = (id) => personnels[id];
let getPersonnels = () => personnels;

let appType = new GraphQLObjectType({
name: 'App',
fields: () => ({
id: globalIdField('App'),
personnels: {
type: personnelConnection.connectionType,
args: connectionArgs,
resolve: (_, args) => connectionFromArray(personnels, args)
}
}),
interfaces: [nodeInterface]
});

let personnelType = new GraphQLObjectType({
name: 'Personnel',
fields: () => ({
id: {
type: new GraphQLNonNull(GraphQLID),
resolve: (obj) => obj.id
},
name: {type: GraphQLString},
}),
});


let personnelConnection = connectionDefinitions({
name: 'Personnel',
nodeType: personnelType
});

new GraphQLObjectType({
name: 'Query',
fields: {
node: nodeField,
app: {
type: appType,
resolve: () => app
},
}
}),
});

export default schema;




Answer

You made a spelling mistake in your node definitions (you wrote gloablId instead of globalId in the second line). That's why globalId is not defined.

let {nodeInterface, nodeField} = nodeDefinitions(
  (gloablId) => {
    const {type} = fromGlobalId(globalId);

    switch(type) {
      case 'App':
        return app;
      default:
        return null;
    }
  },
  (obj) => {
    if (obj instanceof App) {
      return appType;
    } else if (obj instanceof Personnel) {
      return personnelType;
    } else {
      return null;
    }
  }
);

When these errors appear I always try to pin down the bug by searching my code for the variable named in the error. That mostly helps

Comments