Invariant Violation: Expecting a parsed GraphQL document.

[johannesmutter]

After updating svelte-apollo to 4.0.0 I get this error: Uncaught (in promise) Invariant Violation: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag?

I changed the import for ApolloClient. Because the import as specified in the examples of "Readme" causes this error:

import { ApolloClient } from '@apollo/client'; // error: Uncaught ReferenceError: React is not defined
import { ApolloClient } from '@apollo/client/core'; // correct import for non-React/ vanilla

This is the simpliefied code that creates above error. In svelte-apollo.js:

import { ApolloClient } from '@apollo/client/core';
import { InMemoryCache } from '@apollo/client/cache';
const apolloClient = new ApolloClient({
    cache: new InMemoryCache(),
    uri: "http://localhost:6000/graphql",
});
export default apolloClient;

In app.svelte:

import apolloClient from "./svelte-apollo.js";
setClient(apolloClient);

In book.svelte:

<script>
  import { getClient, query, mutation } from 'svelte-apollo'; 
  import { gql } from '@apollo/client/core';
  const client = getClient();
  const uuid = "fed9ecbe-34a6-46c2-a950-2d140f85bd0f"

  const getBook = gql`
    query ($uuid: String!){
      getBook(uuid: $uuid) { name }
  }`;

  const book = query(client, {
      query: getBook,
      variables: {uuid}
  });
</script>

{#await $book}
    ...loading
{:then data}
    {console.log("$book", data)}
{/await}

package.json:

"svelte": "^3.29.0",
"@apollo/client": "^3.2.0",
"svelte-apollo": "^0.4.0",
"graphql": "^15.3.0",

I tried many different variations of the query, with and without variables but the error persists. Can you maybe share a full example with the code for gql... ?

Thank you

[johannesmutter]

I just noticed how the query method for client is written has changed, which caused above error:

wrong:

const book = query(client, {
      query: getBook,
      variables: {uuid}
  });

correct:

  const card = query(getBook, {
    variables: {uuid}
  });

or:

  const card = client.query(getBook, {
    variables: {uuid}
  });