1

您好，当我使用 apollo-link-state 调用本地状态的突变函数时，我遇到了这些错误。

我也有节点模块的图片问题，现在无法解决。

请任何帮助。

------节点问题apollo-link-http-common

- - - 代码 - - - -

------index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import 'typeface-roboto'
import registerServiceWorker from './registerServiceWorker';
import App from './App';
import './style.css';

import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { withClientState } from 'apollo-link-state';
import { ApolloLink } from 'apollo-link';

 const cache = new InMemoryCache();


const defaulState = {
pagPrincipal: {
__typename: 'PagPrincipal',
bienvenido: 'Bienvenido Hello!! estamos desde el local state',
descripcion: 'Este es el primer software web con tecnologia React, 
ApolloGraphQl, Material-ui, node.js y mongoDB'
},
 datosNumericos: {
__typename: 'DatosNumericos',
cantStock: 0
}
}

const stateLink = withClientState({
cache,
defaults: defaulState,
resolver: {
Mutation: {
  updatePagPrinc: (_, { index, value }, { cache }) => {
    console.log(index, value)
  }
} 
}
})

 const MONGODB_BASE_URL = 'http://192.168.1.2:4000/graphql';
 const httpLink = new HttpLink({
 uri: MONGODB_BASE_URL,
 });




 const client = new ApolloClient({

 link: ApolloLink.from([
 stateLink, //Unica Fuente de la verdad
 httpLink //Servidor ApolloGraphQl
 ]),
 cache
 });

 ReactDOM.render(
 <ApolloProvider client={client}>
 <BrowserRouter>
  <App />
 </BrowserRouter>
 </ApolloProvider>,  
 document.getElementById('root')
 );

 registerServiceWorker();

--------updatePagPrincipal.js

import gql from 'graphql-tag';

export default gql`
mutation updatePagPrinc($index: String! , $value: String!) {
    updatePagPrinc(index: $index, value: $value) @client{
        bienvenido
    }
 }
 `

--------FromLogin.js

import React, {Fragment}from 'react'
import { compose, graphql  } from 'react-apollo';
import updatePagPrincipal from '../../LocalState/graphql/updatePagPrincipal'


 class FormLogin extends React.Component{
 constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.titleInput = React.createRef();
    this.descriptionInput = React.createRef();                  
  }
 render(){
    const { updatePagPrinc } = this.props 
    return (
             <Fragment>

             <form onSubmit={e => {
                     e.preventDefault();
                     //when invoque these is the problem!!!
                      updatePagPrinc({
                         variables: {
                         index: 'Titulo',
                         value: this.titleInput.current.value
                     }
                 })
                     console.log(this.titleInput.current.value)
                     this.titleInput.current.value = ""
                 }}>
                 <label> Titulo:</label><input type="Text" ref= 
         {this.titleInput}/>
                 {/* <label> descripcion:</label><input type="Text" ref= 
         {this.descriptionInput}/> */}
                 <button type="submit" >Guardar</button>
             </form>
         </Fragment>

        )
       }
    }

  export default compose(graphql(
  updatePagPrincipal, {
  name: 'updatePagPrinc'
  })
  )(FormLogin);
4

1 回答 1

1

您需要为您承诺的突变捕获错误。

updatePagPrinc({
    variables: {
        index: 'Titulo',
        value: this.titleInput.current.value
    }
}).catch((res) => {
  const errors = res.graphQLErrors.map((error) => {
    return error.message;
  });
  this.setState({ errors });
});
于 2019-02-12T08:02:14.803 回答