GraphQL Tutorial #25 - Apollo Client Setup

Hey gang, in this GraphQL tutorial I'll show you how to set up React with GraphQL using Apollo. Apollo helps our front-end app to generate queries to our server, and receive the data back.

----- COURSE LINKS:

======== Other Tutorials =========

----- NODE.JS TUTORIALS

----- MONGODB TUTORIALS

----- REACT TUTORIALS

======== Social Links ==========

[AdrianToddRoss]

I actually stopped the video as soon as you sent us to the docs and figured this out on my own! First, I ran into a CORS issue cuz I have separate apps/repos, then I had a hard time setting up Apollo, but this entire course has built up my confidence so much that I persevered til I could make those commits with everything 100% working!

[himbary]

Quick start guide for future readers:

[marktwain]

You have a unique way to explain everything. Thank you for all those great free series.

[retex]

I received an error complaining about cannot find module slicedtoarray. Solved this by typing 'npm add @babel/runtime' in the client folder in terminal

[juanguirao]

Hi Shaun! I am your fan, but I have had to discard this tutorial, as it is now too old and still using apollo-boost.

Apollo docs read:
"The Apollo Boost project is now retired, because Apollo Client 3.0 provides a similarly straightforward setup. We recommend removing all apollo-boost dependencies and modifying your ApolloClient constructor as needed."

[azhar.difa_]

For those who can't install "$ npm install apollo-boost react-apollo graphql --save" try "$ npm install @apollo/client graphql"

[pauliussulcas]

Hello Mr. Net Ninja!

First of all let me thank you for this as well as other tutorial series! They really great and well crafted... I am always recommending them for junior devs!


Bare minimum needed to get it working now is:

const client = new ApolloClient({
cache: new InMemoryCache(),
})

Though on Apollo's site "Basic migration" section they are suggesting a bit longer syntax with error handling.

I'm afraid video may need to be re-recorded... I have figured it out quite quickly, but less experienced folks might get completely stuck on this.

[ahmedtohamy]

Hi Buddy, are you going to release a new GraphQL course soon ? i think this is too old now :)

[samselfridge]

Favorite note when installing all the apollo things:

[inaamullah]

I am using the new version and I got the error of
TypeError: Object(...) is not a function
export default


I tried to find it everywhere but to no avail . can you help me out in this ?

[hamodeyDooba]

why u dont use prettier for formatting document ?

[hzburki]

Does setting up apollo differ for React Native ?

[hamroshroy]

netninja first of thank you for all your great videos... !! A big Fan !! Could you hel me with the my query below

I am using the <mutation> component in apollo client ! the provided states props are data, loading and error (ApolloError )

{loading && <p>Saving Category...</p>}
{error && <p>Error :( Please try again</p>}

I want to show the actual error also that is returned from the server along with the please try again message in the div provided. I want to know how to use that ApolloError)

[brayancantor]

be careful with putting https instead of http.