useQuery continuously fetches; loading always true

Intended outcome: Fetch once. Loading should be true, then false. Data should not be undefined.

Actual outcome: Fetches nonstop (looped)

Loading always true. Data always undefined. Error always undefined.

Server + Playground works as intended. No errors are displayed in RN Debugger, even though I’ve turned all error logging on.

How to reproduce the issue:

//Schema
const typeDefs = gql`
  type Query {
    recordsByTime(): [Record]
  }
  type Record {
    id: Int
  }
`

const RecordsByTime = gql`
    query RecordsByTime() {
        recordsByTime() {
            id
        }
    }
`
 const { loading, error, data,  } = useQuery(RecordsByTime, {
        client,
        variables: {},
        errorPolicy: 'all',
        fetchPolicy: 'no-cache',
        onCompleted: (c) => {
            console.log(c) //Never gets called
        },
    })

export const resolvers = {
      recordsByTime: async (root, { }, context) => {
          return [{ id: 1}, { id: 2}, { id: 3 }];
      }
}

export const getApolloClient = (token = null) => {
    let httpURI = 'http://DOMAIN.com:4000/graphql'
    if (__DEV__) {
        httpURI = Platform.OS == 'ios' ? 'http://localhost:4000/graphql' : 'http://10.0.2.2:4000/graphql'
    }
    const httpLink = createHttpLink({
        uri: httpURI,
    })
    const authLink = setContext(async (_, { headers }) => {
        return {
            headers: {
                ...headers,
                authorization: token ? `Bearer ${token}` : '',
            },
        }
    })
    const errorLink = onError(({ graphQLErrors, networkError }) => {
        if (graphQLErrors)
            graphQLErrors.map(({ message, locations, path }) =>
                console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
            )
        if (networkError) console.log(`[Network error]: ${networkError}`)
    })
    const client = new ApolloClient({
        link: from([authLink, errorLink, httpLink]),
        cache: new InMemoryCache(),
    })
    return client
}

Versions System: OS: macOS 11.4 Binaries: Node: 16.2.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.13.0 - /usr/local/bin/npm Browsers: Chrome: 91.0.4472.77 Safari: 14.1.1 npmPackages: @apollo/client: ^3.3.19 => 3.3.19 apollo-cache-inmemory: ^1.6.6 => 1.6.6 apollo-client: ^2.6.10 => 2.6.10 apollo-link: ^1.2.14 => 1.2.14 apollo-link-context: ^1.0.20 => 1.0.20 apollo-link-error: ^1.1.13 => 1.1.13 apollo-link-http: ^1.5.17 => 1.5.17 react-apollo: ^3.1.5 => 3.1.5

[felixchan]

Fixed in my case ; it was a timestamp (Date) in the variables.

const time = useRef(DateTime.local().toString())

[dylanwulf]

@JacksonMalloy Here is an ApolloLink that I wrote to add timeout functionality:

import { ApolloLink, Observable } from '@apollo/client';
import type { OperationDefinitionNode } from 'graphql';
import { Kind } from 'graphql/language';

const timeoutLink = new ApolloLink((operation, forward) => {
	const { operation: operationType } = operation.query.definitions.find(
		definition => definition.kind === Kind.OPERATION_DEFINITION,
	) as OperationDefinitionNode;

	if (operationType === 'subscription') {
		// timeout should not apply to subscriptions
		return forward(operation);
	}

	// timeout value can be specified through the `context` object in useQuery/useMutation
	// value is in milliseconds and defaults to 30,000ms
	const { timeout = 30000 } = operation.getContext();

	return new Observable(subscriber => {
		let timeoutId: number;

		const forwardSubscription = forward(operation).subscribe({
			next: data => {
				subscriber.next(data);
			},
			complete: () => {
				window.clearTimeout(timeoutId);
				subscriber.complete();
			},
			error: err => {
				window.clearTimeout(timeoutId);
				subscriber.error(err);
			},
		});

		timeoutId = window.setTimeout(() => {
			forwardSubscription.unsubscribe();
			subscriber.error(new Error('Timeout'));
		}, timeout);

		return () => {
			window.clearTimeout(timeoutId);
			forwardSubscription.unsubscribe();
		};
	});
});

export default timeoutLink;