CODEWITHSUNDEEP
graphqlreact-apolloapollo-client
Tomasz Superson
Tomasz Superson

Reputation: 59

Querying for a local state variable doesn't immediately return a result

I'm querying for my local variable isLeftSidebarOpen and I thought that it should immediately return result without loading state. isLeftSidebarOpen is initialized when ApolloClient is created.

const data = {
    isLeftSidebarOpen: false,
};
const initializeCache = cache => {
    cache.writeData({ data });
};

const cache = new InMemoryCache();

const client = new ApolloClient({
    link: new HttpLink({
        uri: 'http://localhost:4000/graphql',
        credentials: 'include',
    }),
    cache,
    resolvers,
});

initializeCache(cache);

 query IsLeftSidebarOpen {
   isLeftSidebarOpen @client
 }

 const { data, loading } = useQuery(IS_LEFTSIDEBAR_OPEN);
 console.log(data);
 console.log(loading);

The result is:

undefined
true
{ isLeftSidebarOpen: false }
false

Whereas I expected to be:

{ isLeftSidebarOpen: false }
false

What is wrong with my understanding?

Upvotes: 0

Views: 41

Answers (1)

Philip Feldmann
Philip Feldmann

Reputation: 8375

The local resolver interface has to be asynchronous as apollo client can simply not know wether you'll implement your local resolvers asynchronoulsy or not. Asynchronous works in both scenarios, synchronous does not. Even if your implementation itself is synchronous, apollo will await that function before setting loading to false.

Another "benefit" is that your query behaves the exact same way, regardless of it being resolved locally or remote.

However, cache.readQuery is a synchronous operation, so you can use that instead of using a local resolver to return the data immediately, given that you get a cache hit.

Upvotes: 2

Related Questions