13

I keep getting this error when trying to update cache after mutation:

Possible Unhandled Promise Rejection (id: 0): Invariant Violation: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag?

The mutation succeeds, then I run this code inside the onCompleted method.

const cards = this.props.client.readQuery({ FETCH_CARDS, variables: { userId: data.createPaymentMethod.userId } });

const { id,
        brand,
        lastFour,
        userId,
        stripeID } = data.createPaymentMethod

const paymentMethod = {
  id: id,
  brand: brand,
  lastFour: lastFour,
  userId: userId,
  stripeID: stripeID,
  __typename: 'PaymentMethod',
};

// Write back to the to-do list and include the new item
this.props.client.writeQuery({
  FETCH_CARDS,
  data: {
    paymentMethod: [...cards.paymentMethod, paymentMethod],
  },
});

I don't understand what I'm doing wrong. I'm following this guide: https://www.apollographql.com/docs/react/caching/cache-interaction/#writequery-and-writefragment

EDIT: FETCH_CARDS

const FETCH_CARDS = gql`
  query PaymentMethod($userId: ID){
    paymentMethod(userId: $userId) {
      id
      brand
      lastFour
      userId
      stripeID
    }
  }
`;
Hugo
  • 2,073
  • 6
  • 23
  • 46

4 Answers4

13

When this happens to me, the issue is usually as simple as the import for FETCH_CARDS not resolving correctly. It is hard to determine without having the complete example, I'd need to be able to see the entire file for each of the code samples and the directory structure.

matsilva
  • 556
  • 4
  • 6
  • Dang! Exactly this! The import was OK in vscode (it was able to follow it to the source file), but in reality it wasn't getting imported properly. I was using the "barrelling technique" to mass import and export within a single file. – Jose A Mar 19 '20 at 12:14
  • 1
    This. When you export your query as `export { someQuery }`, make sure you import it elsewhere with the brackets as `import { someQuery } from '../..'` – HJW Jun 03 '20 at 01:34
  • Yep. Any incorrectly-named import (or a named import where it should be a default import, or vice versa) will cause this error. If you think you're importing a `gql`-wrapped query string, but it's actually `undefined` or some random object instead, once you pass that thing to the Apollo client you get the error. Stricter TypeScript checking can help catch this kind of issue, otherwise you just have to take a closer look at your imports and exports. – Andrew Koster Aug 16 '20 at 22:13
  • 1
    Thanks for the hint. In my case the import path was fine, but the app apparently got into a weird state where the import was not being compiled correctly. Restarting the app solved the issue for me. – xji May 04 '21 at 02:16
5

For me, the solution was changing readQuery({ FETCH_CARDS to readQuery({ query: FETCH_CARDS and the same for writeQuery(). I agree that their example appears misleading, because they name their gql call "query" instead of a normal all-caps name. But really it's to tee up shorthand object prop notation for readQuery({ query: query.

Teagan Atwater
  • 178
  • 1
  • 3
  • 10
1

Ahaa ran into same issue today when I was following similar tutorial from Udemy.

If you were using some other client provider like "graphql-request" or normal fetch calls and then tried switching to "@apollo/client" then I think I have answer for you (and that is also super simple one).

Please pay close attention to packages imported here from different libraries.

import { request, gql } from "graphql-request";
import { ApolloClient, InMemoryCache } from "@apollo/client";

const FETCH_CARDS = gql`
query PaymentMethod($userId: ID){
  paymentMethod(userId: $userId) {
    id
    brand
    lastFour
    userId
    stripeID
  }
}`;

Now even after using client.query({FETCH_CARDS }) in correct way where FETCH_CARDS has gql tag I got error as below.

You must wrap the query string in a "gql" tag

So this happens as @apollo/client expects gql tag which is imported from "@apollo/client" only and not from other packages.

Hence, simply after changing the gql import from correct library as below, in this case "@apollo/client" it started working without any issues.

import { gql, ApolloClient, InMemoryCache } from "@apollo/client";

Kindly try this and upvote if you find it useful!

user4699703
  • 11
  • 3
0

For me the issue was easy to miss, i had import { products } from '~/components/apollo/queries/products';

It needed to be import products from '~/components/apollo/queries/products';

Basically remove the { } around the queried attribute products

Sebastian
  • 402
  • 3
  • 12