![]() Prioritizes minimizing the number of network requests sent by your application.Īpollo Client executes the query only against the cache. Otherwise, Apollo Client executes the query against your GraphQL server and returns that data after caching it. If all requested data is present in the cache, that data is returned. Instead, it returns a query function in its result tuple that you call whenever you're ready to execute the query.Īpollo Client first executes the query against the cache. ![]() Unlike with useQuery, when you call useLazyQuery, it does not immediately execute its associated query. The useLazyQuery hook is perfect for executing queries in response to events besides component rendering. But what if you want to execute a query in response to a different event, such as a user clicking a button? When React renders a component that calls useQuery, Apollo Client automatically executes the corresponding query. If you set errorPolicy to all, useQuery does not discard query response data, allowing you to render partial results.įor more information, see Handling operation errors. In this case, Apollo Client discards any query response data returned by the server and sets the error property in the useQuery result object. The default value is none, which tells Apollo Client to treat all GraphQL errors as runtime errors. You can customize your query error handling by providing the errorPolicyĬonfiguration option to the useQuery hook. To view a complete version of the app we just built, check out the CodeSandbox here. To enable polling for a query, pass a pollInterval configuration option to the useQuery hook with an interval in milliseconds: Polling provides near-real-time synchronization with your server by executing your query periodically at a specified interval. Apollo Client supports two strategies for this: polling and refetching. Sometimes, you want to make sure that your query's cached data is up to date with your server's data. Next, let's learn some techniques for ensuring that our cached data is fresh. You'll notice that the bulldog photo loads instantly the second time around. Then switch to another breed, and then switch back to bulldog. Select bulldog from the dropdown to see its photo appear. In this case, we want to pass the currently selected breed from the dropdown. The variables option is an object that contains all of the variable s we want to pass to our GraphQL query. Notice that we're providing a configuration option ( variables ) to the useQuery hook this time. DogPhoto accepts a prop called breed that reflects the current value of the dropdown menu in our Dogs component: To see this caching in action, let's build a new component called DogPhoto. This makes later executions of that same query extremely fast. Whenever Apollo Client fetches query results from your server, it automatically caches those results locally. In the next step, we'll associate the dropdown with a more sophisticated query that uses GraphQL variable s. When the user selects a dog breed from the populated dropdown, the selection is sent to the parent component via the provided onDogSelected function. ![]() The component renders a dropdown menu that's populated with the list of dog breeds returned by the server. When loading is false and there is no error, the query has completed.As long as loading is true (indicating the query is still in flight), the component presents a Loading.As our query executes and the values of loading, error, and data change, the Dogs component can intelligently render different UI elements according to the query's state:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |