When your app reloads, you should briefly see a loading indicator, followed by a list of exchange rates! If you don't, you can compare your code against the completed app on CodeSandbox.Ĭongrats, you just made your first component that renders with GraphQL data from Apollo Client! 🎉 Now you can try building more components that use useQuery and experiment with the concepts you just learned. We suggest putting the ApolloProvider somewhere high in your app, above any component that might need to access GraphQL data.įunction App ( ) In index.js, let's wrap our React app with an ApolloProvider. Similar to React's Context.Provider, ApolloProvider wraps your React app and places Apollo Client on the context, which enables you to access it from anywhere in your component tree. You connect Apollo Client to React with the ApolloProvider component. You can bind queries to your UI and update it automatically as new data is fetched.
Nice!Īlthough executing GraphQL operations directly like this can be useful, Apollo Client really shines when it's integrated with a view layer like React. You should see a data property with rates attached, along with some other properties like loading and networkStatus. Run this code, open your console, and inspect the result object.
0 kommentar(er)
