Apollo react: combining rest and graphql with link-state

Question

I am trying to use REST endpoints to post data and GraphQL for query and fetch along with apollo-link-state. My rest endpoint is getting hit and application is getting created. But when I try to run the query to write to cache it's not hitting the graphql endpoint. and I keep getting the following error:

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
  }
}.

Here are my GQL query

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,
};

Here is my resolver:

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,
  },
};

Here are my links:

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,
]);

my client

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

My react component:

// 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>
  )
};

When I hit the button it calls create endpoint and creates the app and returns the uuid. But the following I want to happen is hit the graphql endpoint and query for the application using the uuid returned from the rest request, and write that data to the cache/state.

Apollo react: combining rest and graphql with link-state

0 Answers0