I have the Apollo client configured as per the docs, using the ApolloProvider so that I may be able to use useQuery in nested components. When I run queries using the apolloClient that is provided to the ApolloProvider, I.e.:

apolloClient.query({query, variables});

queries work just fine. However, in a screen further down the tree I have something like the following:

export default function SomeScreen({ route }: RouteProps) {
  ...
  let query: DocumentNode;
  switch (route.params.someParam) {
    case 'A':
      query = someQuery1;
      break;
    ...
    default:
      query = someQueryX;
  }

  const {loading, error, data} = useQuery<{myData: SomeType[]}, QueryArgTypes>(
    query,
    {variables}, //assigned elsewhere but they're constant
  );

  if (loading) return <Text>Loading</Text>
  if (error) return <Text>Error</Text>
  return (
    <FlatList
      data={data?.myData}
      renderItem={({ item }) => (<SomeComp elem={item} />)}
      keyExtractor={(item) => (
        item._id!.toString()
      )}
    />
  );
}

However, in this case, the if (loading) branch is just always true. Furthermore, the uri I used when instantiating apolloClient is one which is part of the project I'm working on. I was able to set break points in it to pause execution when my query executes, and it never reaches any of the breakpoints I've set at all. So as far as I can tell, useQuery isn't even trying to execute the query (never makes it to the backend) but I don't get any description of what's going on. Anyone have any idea what might be happening? Some relevant dependencies are:

"react": "17.0.1",
"react-native": "0.64.3",
"@apollo/client": "^3.6.2",

CodePudding user response：

Honestly I don't know what that issue might be, but here's an example so you can make sure you have the proper set up of the client:

client.js

const httpLink = createHttpLink({
  uri: URL_GRAPHQL,
});

const authLink = setContext( async (_, { headers })  => {

  const token = await getTokenService()
    
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});


export default client

App.tsx

import React from 'react';
import { StatusBar } from 'react-native';
import { ApolloProvider } from '@apollo/client';

import AppRouter from './src/routes/AppRouter';
import client from './src/graphql/client';

export default function App() {

  return (
                
    <ApolloProvider client={client}>
      
      <StatusBar barStyle='light-content'/>
      <AppRouter />
      
    </ApolloProvider>
    
    
  );
  
}

Child component:

const ListScreen : React.FC<IProps> = ( { route } ) => {
  
  let listId                              = route.params.listId;
  const styles                            = useStyles()
  const { loading, error, data, refetch } = useQuery<ListResponse>(GET_LIST_ById, { variables: { listId } });
  
  return (
     <view>
     </view>
  )
  
  }

CodePudding user response：

Apparently this was a known bug. In case anyone else encounters this, upgrading to the beta solved it for me:

'loading' remains true when loading data with 'useQuery' using 'apolloClient' in react-native