Ex1:
<ApolloProvider client={client}>
<App />
</ApolloProvider>
Ex2:
<SomeConnectionComponent someprop={something}>
<SomeStateFullComponent/>
</SomeConnectionComponent >
In both example why wrap the App and SomeStateFullComponent inside the ApolloProvider and SomeConnectionComponent ? what is the React concept applied here? whats happening in this code?
If you heard of HOC (High order components), this is intended to enhance the wrapped content.
The same goes for providing React context so that all bellow can use it.
What happens under the hood is the same thing with HOC. It gives some props to wrapped components and enables them to use some hooks or in case of class components have inherited properties.
this is graphql code. Graphql is like restful api, you request something from the server and it returns you what you ask. In full stack applications, you write your graphql code on the server, and from the client a user asks for some specific information, let's say you have a button to show the list of songs in your database, a user clicks on the button and graphql server returns an answer. In order to communicate with the server, there are some technologies like apollo, lokka and relay.
import { ApolloProvider } from "react-apollo";
if ApolloProvider is used that means apollo-client is set up in the app. apollo-client talks to the server, it gets the response and it passes it to the react-apollo.
ApolloProvider is where the response is stored. Or we can say state is stored. So ApolloProvider wraps up your application and passes all the information that it has to your components. So your components can connect to the ApolloProvider and use the information.
this is an implementation of how state is managed inside the app. think react-apollo is like a bridge between your application and apollo-client.
if you are curious this is how your components can connect to ApolloProvider. let say you are at Home component:
import { graphql} from "react-apollo";
const Home=()=>{
return(JSX) //
}
export default graphql(query)(Home);
in this demo, Home component wants to access result of queries that ApolloProvider stored. in the future, if you keep working with react, you will see the similar implementation.
ApolloProvider ta
