local cache querying works but prints issues; local mutations do not work

[pashazz]

2.1.5 (Latest version). (Probably there's some dev version somewhere that works?)

Initialization:

// Create an http link:
const httpLink = new HttpLink({
  uri: 'http://localhost:3000/api/graphql',
  credentials: 'same-origin',
});

// Create a WebSocket link:
const wsLink = new WebSocketLink({
  uri: `ws://localhost:3000/api/subscriptions`,
  options: {
    reconnect: true
  }
});

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === 'OperationDefinition' && operation === 'subscription';
  },
  wsLink,
  httpLink,
);

const client = new ApolloClient(
  {
    link: ApolloLink.from(
      [
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors)
        graphQLErrors.map(({ message, locations, path }) =>
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
          ),
        );
      if (networkError) console.log(`[Network error]: ${networkError}`);
    }),
        link]),

    cache: new InMemoryCache(
      {

          dataIdFromObject: object => {
            // @ts-ignore
            if (object.uuid)
            {
              // @ts-ignore
              return `${object.__typename}:${object.uuid}`
            }
            else if (object.__typename === 'Interface')
            {
              return null; //Interfaces do not have unique ID's, we'd rather link them with their VMs
            }
            else {
              return defaultDataIdFromObject(object);
            }
          }
      }
    ),
    typeDefs : gql`
      type Mutation {
        selectVmTableItem(id: ID!): [ID!]
        deselectVmTableItem(id: ID!): [ID!]
      }
      type Query {
        vmTableSelection: [ID!]
      }
    `,
    resolvers: {
      Mutation: {
        selectVmTableItem: (_root, variables, context) => {
          const query = gql`
            query GetVmTableSelection {
              vmTableSelection @client 
            }
          `;
          const previous = context.cache.readQuery({query});
          const data = [...previous, variables.id];
          context.cache.writeQuery({query, data});
          return data;
        }
      },
    }
  }
);

client.cache.writeData({
  data: {
    vmTableSelection : []
  }
});

Trying to query:

Trying to mutate:

console errors:

[GraphQL error]: Message: Cannot query field "selectVmTableItem" on type "Mutation"., Location: undefined, Path: undefined
[Network error]: ServerError: Response not successful: Received status code 400

[justinanastos]

Thanks for reporting this issue! I see in the screenshot that you used the @client directive in the query but not in the mutation. If you add the @client directive to the mutation, does it work correctly?

[justinanastos]

I can reproduce this issue with local mutations as well. Thanks for the report @pashazz

[justinanastos]

Local mutations appear to be working again and we've added all local state to GraphiQL with v2.2.0.

[lyudad]

Hello, I have same issue in v2.2.0

[thomascothran]

This is still an issue with v2.2.2.