Apollo React:将Rest和graphql与链接状态结合起来

时间:2018-10-23 14:42:56

标签: graphql apollo react-apollo apollo-link-state apollo-link-rest

我正在尝试使用REST端点发布数据和GraphQL进行查询和获取以及apollo-link-state。我的其余端点受到攻击,并且正在创建应用程序。但是,当我尝试运行查询以写入缓存时,它并没有到达graphql端点。而且我不断收到以下错误:

Unhandled Rejection (Error): Can't find field findApplicationByUuid({"uuid":"912dc46d-2ef8-4a77-91bc-fec421f5e4bc"}) on object (ROOT_QUERY) {
  "application": {
    "type": "id",
    "id": "$ROOT_QUERY.application",
    "generated": true
  }
}.

这是我的GQL查询

import gql from 'graphql-tag';

const START_APP = gql`
  mutation startApp($type: String!) {
    application: startApp( input: { applicationType: $type})
    @rest(type: "Application", path: "v1/member/application/create", method: "POST") {
      uuid: applicationUuid
    }
  }
`;

const GET_APP = gql`
  query getAppByUuid($uuid: String!) {
    application: findApplicationByUuid(uuid: $uuid) {
      uuid,
      type,
      version,
    }
  }
`;

export {
  START_APP,
  GET_APP,
};

这是我的解析器:

import { START_APP, GET_APP } from './application'
import client from '../apolloClient';


const startApp = async (_, { type }, { cache }) => {
  client.mutate({
    variables: { type },
    mutation: START_APP,
  }).then(({ data: { application } }) => {
    const { uuid } = application;

    const { data } = cache.readQuery({
      query: GET_APP,
      variables: { uuid },
    });

    cache.writeQuery({
      query: GET_APP,
      data,
    });
  });
};

const resolvers = {
  Mutation: {
    startApp,
  },
};

这是我的链接:

import { resolvers, defaults } from './resolvers';

const cache = new InMemoryCache();

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(`[GQL Error]: Msg: ${message}, Loc: ${locations}, Path: ${path}`));
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

const stateLink = withClientState({
  cache,
  defaults,
  resolvers,
});

const restLink = new RestLink({
  uri: 'http://localhost:7010/api/',
  credentials: 'include',
});

const batchHttpLink = new BatchHttpLink({
  uri: 'http://localhost:7010/api/graphql',
  credentials: 'include',
});

const httpLink = new HttpLink({
  uri: 'http://loaclhost:7010/api/graphql',
  credentials: 'include',
});

const link = ApolloLink.from([
  errorLink,
  stateLink,
  restLink,
  httpLink,
]);

我的客户

const client = new ApolloClient({
  link,
  cache,
});

我的反应组件:

// Remote Mutation
const START_APP = gql`
  mutation startApp($type: String!) {
    startApp(type: $type) @client {
      uuid
    }
  }
`;

const StartApp = ({ match }) => {
  const { type } = match.params;

  return (
    <Mutation mutation={START_APP} variables={{ type }}>
      {startApp => (<button onClick={startApp}>click me</button>)}
    </Mutation>
  )
};

当我按下按钮时,它将调用创建端点并创建应用程序并返回uuid。但是以下我想发生的事情是击中graphql端点,并使用从rest请求返回的uuid来查询应用程序,并将该数据写入缓存/状态。

0 个答案:

没有答案