apollo graphql request must include: "query" or "queryId"

Question

I'm trying to build a nextjs website using apollo graphql and drupal.

I can get pages, but my request fails when I try to use a search component to query pages i've built.

My query looks like this:

  const [loadSearch, {loading, error, fetchMore}] = useLazyQuery(SEARCH, {
    notifyOnNetworkStatusChange: true,
    onCompleted: (data) => {
      console.log(data);
    },
    onError: (err) => {
      console.log(err);
    }
  });

  useEffect(() => {
    loadSearch({
      variables: {
        query: "test"
      },
    });
  }, [search]);

And my query looks like:

export const SEARCH = gql`
  query search($query: String!) {
    search(query: $query, access: "Search") {
        ... on SearchDocuments {
        total
        type
        documents {
          id
          parent {
            id
            labelOnly
            path
            title
            type
          }
          path
          status
          summary
          title
          type
        }
      }
    } 
  } 
`;

And the error I get in my console is:

Error: GraphQL Request must include at least one of those two parameters: "query" or "queryId"

I can confirm that the query works inside drupal:

Any help is much appreciated

Edit: This error still occurs, even if i've modified to just useQuery instead:

  const {loading, error, fetchMore} = useQuery(SEARCH, {
    variables: {
      query: "test"
    },
    notifyOnNetworkStatusChange: true,
    onCompleted: (data) => {
      console.log(data);
      console.log('set real data')
    },
    onError: (err) => {
      console.log(err);
      console.log('set dummy data');
    }
  });

See - blog.chrismitchellonline.com/posts/drupal8-graphql-in-action — Sean W
– Sean W, Commented Oct 1, 2021 at 5:25
@SeanW the same error, different case ... if client works corectly this is POST vs browser GET ... Corey, test API using Postman/Insomnia — xadm
– xadm, Commented Oct 1, 2021 at 7:02
I recommend to rename your stuff so they don't match. Apollo or any backend gql framework are working with string-comparement so it is not clear where the error comes from. E.g. don't use "query" as param or "search" as query name AND "search" as query name. You see the problem? The string-comparement is case-sens. so you use camel case or something. I don't know if this fixes your stuff, but may help in the future. — Dnl
– Dnl, Commented Oct 1, 2021 at 13:09
Thanks so much guys for your comments. After going through the query and the project file, I figured out it was my .env.local to be the culprit. I had it set up with a forward slash in my base url, this didn't matter in page routing but caused issues with using the search query relying on url params to search. Removing the slash fixed it. — Corcor
– Corcor, Commented Oct 3, 2021 at 8:40

Vishal Nai · Accepted Answer · 2021-09-30 13:43:28Z

1

You need to pass any keyword in search while calling graphQL api in $query param as you are passing that

Original:

useLazyQuery(SEARCH, ...

Use like below:

useLazyQuery(SEARCH, {query: "test"} ...

answered Sep 30, 2021 at 13:43

Vishal Nai

2881 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Corcor Over a year ago

Hey, thanks for your response, but i've tried something like in the edit i've made to my original post, and the error still occurs. I thought passing the loadSearch in a useEffect would be ok?

Corcor · Accepted Answer · 2021-10-03 08:38:12Z

1

After so much back and forth to figure out what was going on I finally figured it out and it was such a small but easy to make mistake.

The issue was I was using my ip inside the .env.local file with a forward slash like so:

GRAPHQL_BASE_URL='http://192.xxx.xxx.x/'
NEXT_PUBLIC_GRAPHQL_CLIENT_BASE_URL='http://192.xxx.xxx.x/'

WATCHPACK_POLLING=true

This forward slash didn't matter for page routing as that all worked just fine, but it was an issue with my useLazyQuery which relied on url params for a search.

Removing the slash fixed this:

GRAPHQL_BASE_URL='http://192.xxx.xxx.x'
NEXT_PUBLIC_GRAPHQL_CLIENT_BASE_URL='http://192.xxx.xxx.x'

WATCHPACK_POLLING=true

answered Oct 3, 2021 at 8:38

Corcor

911 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

apollo graphql request must include: "query" or "queryId"

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related