CODEWITHSUNDEEP
reactjsgraphqlapollo
Hugo
Hugo

Reputation: 2204

React Apollo GraphQL : Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag?

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

Upvotes: 15

Views: 17773

Answers (4)

user4699703
user4699703

Reputation: 11

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!

Upvotes: 1

Sebastian
Sebastian

Reputation: 442

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

Upvotes: 1

Teagan Atwater
Teagan Atwater

Reputation: 198

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.

Upvotes: 7

matsilva
matsilva

Reputation: 566

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.

Upvotes: 14

Related Questions