GraphQL/Relay-Schema-Feld kann nicht "speichern" auf Typ "CreateLinkPayload"

Question

abfragen kann ich erfolgreich graphql/Relais-Abfragen und Mutationen, die mit CURL und GraphiQL Werkzeug tun:

Doch meiner reagieren/Relais App kann ich die Daten in der App abfragen und erhalten, aber jedes Mal, wenn ich versuche, etwas in meiner app zu mutieren, bekomme ich diesen Fehler in der Konsole:

bundle.js:51511 Uncaught Error: GraphQL validation error ``Cannot query field "store" on type "CreateLinkPayload".`` in file 
`/Users/johndoe/react-relay-project/src/mutations/CreateLinkMutation.js`. Try updating your GraphQL schema if an argument/field/type was recently added. 
(anonymous function) @ bundle.js:51511 
getFatQuery @ bundle.js:51512 
getFatQuery @ bundle.js:35664 
getQuery @ bundle.js:35791 
_handleCommit @ bundle.js:35539 
commit @ bundle.js:35453 
commit @ bundle.js:35894 
(anonymous function) @ bundle.js:28526 

und jedesmal, wenn ich npm start bekomme ich diesen Fehler :

-- GraphQL Validation Error -- CreateLinkMutation -- 

File: /Users/johndoe/react-relay-project/src/mutations/CreateLinkMutation.js 
Error: Cannot query field "store" on type "CreateLinkPayload". 
Source: 
> 
>   store { linkConnection } 
>   ^^^ 

CreateLinkMutation.js

import Relay from 'react-relay' 

class CreateLinkMutation extends Relay.Mutation { 
    getMutation() { 
    return Relay.QL` 
     mutation { createLink } 
    ` 
    } 

    getVariables() { 
    return { 
     title: this.props.title, 
     url: this.props.url 
    } 
    } 

    getFatQuery() { 
    return Relay.QL` 
     fragment on CreateLinkPayload { 
     linkEdge, 
     store { linkConnection } 
     } 
    ` 
    } 

    getConfigs() { 
    return [{ 
     type: 'RANGE_ADD', 
     parentName: 'store', 
     parentID: this.props.store.id, 
     connectionName: 'linkConnection', 
     edgeName: 'linkEdge', 
     rangeBehaviors: { 
     '': 'append' 
     } 
    }] 

    } 
} 

export default CreateLinkMutation 

Teile Link.js

Link = Relay.createContainer(Link, { 
    fragments: { 
    link:() => Relay.QL` 
     fragment on Link { 
     url, 
     title 
     } 
    ` 
    } 
}) 

Teile App.js

handleSubmit(e) { 
    e.preventDefault() 
    Relay.Store.update(
     new CreateLinkMutation({ 
     title: this.refs.newTitle.value, 
     url: this.refs.newUrl.value, 
     store: this.props.store 
     }) 
    ) 
    this.refs.newTitle.value = '' 
    this.refs.newUrl.value = '' 
    } 



App = Relay.createContainer(App, { 
    initialVariables: { 
    limit: 10 
    }, 
    fragments: { 
    store:() => Relay.QL` 
     fragment on Store { 
     id, 
     linkConnection(first: $limit) { 
      edges { 
      node { 
       id, 
       ${Link.getFragment('link')} 
      } 
      } 
     } 
     } 
    ` 

    } 
}) 

Teile main.js

class LinkStoreRoute extends Relay.Route { 
    static routeName = 'LinkStoreRoute' 
    static queries = { 
    store:() => Relay.QL`query { store }` 
    } 
} 

Mein schema.js:

const store = {} 

const Store = new GraphQLObjectType({ 
    name: 'Store', 
    fields:() => ({ 
    id: globalIdField('Store'), 
    linkConnection: { 
     type: linkConnection.connectionType, 
     args: connectionArgs, 
     resolve: (_, args) => { 
     return docClient.scan(
      Object.assign(
      {}, 
      {TableName: linksTable}, 
      paginationToParams(args) 
     ) 
     ).promise().then(dataToConnection) 
     } 
    } 
    }) 
}) 

const Link = new GraphQLObjectType({ 
    name: 'Link', 
    fields:() => ({ 
    id: { 
     type: new GraphQLNonNull(GraphQLID), 
     resolve: (obj) => obj.id 
    }, 
    title: { type: GraphQLString }, 
    url: { type: GraphQLString } 
    }) 
}) 

const linkConnection = connectionDefinitions({ 
    name: 'Link', 
    nodeType: Link 
}) 

let createLinkMutation = mutationWithClientMutationId({ 

    name: 'CreateLink', 

    inputFields: { 
    title: { type: new GraphQLNonNull(GraphQLString) }, 
    url: { type: new GraphQLNonNull(GraphQLString) } 
    }, 

    outputFields: { 
    linkEdge: { 
     type: linkConnection.edgeType, 
     resolve: (obj) => ({node: obj, cursor: obj.id}) 
    } 
    }, 

    store: { 
    type: Store, 
    resolve:() => store 
    }, 

    mutateAndGetPayload: (inputFields) => { 

    let link = { 
     id: uuid.v4(), 
     title: inputFields.title, 
     url: inputFields.url 
    } 

    return new Promise((resolve, reject) => { 
     docClient.put(
     Object.assign(
      {}, 
      {TableName: linksTable}, 
      {Item: link} 
     ), 
     (err, data) => { 
      if (err) return reject(err) 
      return resolve(link) 
     } 
    ) 
    }) 
    } 
}) 

const schema = new GraphQLSchema({ 
    query: new GraphQLObjectType({ 
    name: 'Query', 
    fields:() => ({ 
     store: { 
     type: Store, 
     resolve:() => store 
     } 
    }) 
    }), 

    mutation: new GraphQLObjectType({ 
    name: 'Mutation', 
    fields:() => ({ 
     createLink: createLinkMutation 
    }) 
    }) 
}) 

module.exports = schema 

Bitte beachte, dass ich 40 Zeilen require Anweisungen oben ausgeschlossen.

Wie ist das überhaupt möglich? Und wie kann ich es reparieren? Könnte es ein Fehler von relay/react sein?

Answer 1

In Ihrer clientseitige Implementierung von CreateLinkMutation (CreateLinkMutation.js-Datei), gibt getFatQuery() Funktion, dass es erwartet zwei Ausgänge nach der Mutation ist abgeschlossen - linkEdge und store. Daher müssen Sie diese zwei Dinge in Ihrer serverseitigen Implementierung der Mutation als Ausgabe einschließen. Allerdings ist nur linkEdge in den Ausgaben der Mutation in Ihrer aktuellen Implementierung enthalten (createLinkMutation in schema.js-Datei). Um das Problem zu lösen, schließen Sie store an die Ausgänge ein.

outputFields: { 
    linkEdge: { 
    type: linkConnection.edgeType, 
    resolve: (obj) => ({node: obj, cursor: obj.id}) 
    }, 
    store: { 
    type: Store, 
    resolve:() => store 
    }, 
}, 

Answer 2

Schalten Speicher aus

store: { 
    type: Store, 
    resolve:() => store 
    } 

innen outputFields wie so gehen muss:

outputFields: { 
    linkEdge: { 
     type: linkConnection.edgeType, 
     resolve: (obj) => ({node: obj, cursor: obj.id}) 
    } 
    store: { 
     type: Store, 
     resolve:() => store 
    } 
    }