CODEWITHSUNDEEP
reactjsreact-hooksapolloreact-apollo
Coffeeholic
Coffeeholic

Reputation: 378

Use `useQuery` hook the same way as `useMutation` fails

Using React and Apollo React hooks

import { useCallback, useState } from "react";
import { useMutation, useSubscription, useQuery } from "@apollo/react-hooks";

I got a function useChannel in which I have hooks with all my graphql mutations. Each mutation is imported and then declared as a constant like so:

const [addExportChannel] = useMutation(AddExportChannelMutation);

Which I consume in the returned function of the hook like so

  const onAddImportChannel = useCallback(
    async (props) => {
      try {
        const data = await addImportChannel({
          variables: {
            shopId,
            name: props.name,
            url: props.url,
            filetype: props.filetype
          }
        });
...

When I try to do the same with useQuery it fails saying useQuery is not iterable. TypeError: useQuery is not a function or its return value is not iterable

 const [FeedProcess] = useQuery(GetFeedProcessQuery);
...
 const onFeedProcess = useCallback(
    async (props) => {
      try {
        const data = await FeedProcess({
          variables: { shopId, feedId: props.feedId }
        });
...

What am I missing here, trying to figure out what is so different in the two hooks.

Upvotes: 0

Views: 2063

Answers (2)

minefield_tester
minefield_tester

Reputation: 103

Because useQuery is called immediately you cannot store it like this (const [FeedProcess] = useQuery(GetFeedProcessQuery);). But apollo's got useLazyQuery that can be stored like you did. If you'd like to store and invoke it later, use useLazyQuery instead.

Upvotes: 1

luisadrian
luisadrian

Reputation: 21

You should de-structure the props from useQuery hook like so:

const {data, loading, error} = useQuery(GetFeedProcessQuery);

Upvotes: 1

Related Questions