Currently the login all over the app is broken.

Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

Hello,

It would be nice to have some examples, tutorial with advanced techniques like optimistic UI, updateQueries etc. :)

apollo docs include those, but it shows those hard techniques with big, confusing at first github API, simplified examples are better for newcomers :)

thanks !

Overview

• Brief Introduction
• Prerequisites

Introduction

• What is Apollo
• Present the data model for the pokedex
• Redux DevTools
• Network Layer
• Data normalization using dataIdFromObject

Queries

• Basic Queries
• Advanced Queries
• Data in Components
• Data Caching
• Static vs. Dynamic Queries
• skip/include
• Variables
• Using Fragments

Mutations

• Basic Mutations
• Optimistic UI

Advanced Topics

• Pagination
• Polling vs. Subscriptions
• Query Batching
• fetchMore/updateQueries
• Preloading Data
• Testing with Jest

Go further

• Wrap up

In the tutorial it is written that after adding

// Pokedex.js

const PokedexWithData = graphql(TrainerQuery, {
  options: {
    variables: {
      name: 'Arihant Verma '
    },
    forceFetch: true,  <---- # this
  }
}
)(Pokedex)

Why could we remove

// AddPokemonCard.js

const createPokemonMutation = gql`
  mutation createPokemon($name: String!, $url: String!, $trainerId: ID) {
    createPokemon(name: $name, url: $url, trainerId: $trainerId) {
      trainer {     <---- # this trainer section
        id
        ownedPokemons {
          id
        }
      }
    }
  }
`

and replace it just with id.

Doubt 1: Earlier we had to explicitly tell that we wanted to fetch trainer object after mutation is done, what is being returned now, with only id being returned after mutation? What does it exactly mean?

It's written for the trainer object that

What this does, is telling Apollo Client to refetch the trainer object and all its related pokemons whenever we create a new pokemon. Apollo Store identifies the trainer object by its id and it basically merges the known pokemons with all the pokemons in the mutation response. Even though this is highly inefficient, this works in our example.

Doubt 2: Does the above holds true only after we have added dataIdFromObject: o => o.id in ApoloClient instantiation ?

Apollo Client on React/RN/Angular 2

• Quickly explain specific information depending on the library.
• mention Apollo Client for Vanilla JS
• introduce the data model needed for the GraphQL backend
• (starting here, the chapters follow a different track depending on the chosen framework/library)

Exercise 01: Getting Started

Result

• As a user, I can run a preconfigured app with Apollo.

Steps

• clone or create a boilerplate
• install needed Apollo packages with yarn or npm
• create and configure the network layer with a token written in the code

Covers

• Network layer

Exercise 02: Basic Queries

Result

• As a user, I can see a “Welcome {{ user }} in your pokedex” page.

Steps

• create a new page component
• create a title component
• create a first query (viewer) without any parameters
• connect the query to the component
• debug the query in redux debugger

Covers

• Basic Queries
• Data in Components
• Present the data model for the pokedex
• Excursion: Redux DevTools

Exercise 03: Advanced Queries

Result

• As a user, I can see a list with three pokemons by default.

Steps

• create a PokemonCard component which will render the row
• create a react list view component
• connect the PokemonCard component the render row of the list view
• write a query that return the list of three pokemons

Covers

• Nested Queries
• query variables

Exercise 04: Fragments

Result

• As a user, when I click to a pokemon, I can see more details about it.

Steps

• create a new route
• write a query with the id of that route to query the according pokemon
• create a more complicated component (maybe two or three components for that page) and connect them to the result
  maybe the right time to introduce fragments

Covers

• Using Fragments
• Data normalization using dataIdFromObject
• Data Caching

Exercise 05: Mutations

Result

• As a user, I can add a new pokemon to my pokedex.

Steps

• first mutation (create mutation)
• add a loader + maybe query network status in apollo (apollographql/apollo-client#707)
• add a call to action with a design specific to platform

Covers

• Basic Mutations
• Excursion: updateQueries

Exercise 06: Optimistic UI

Result

• As a user, I can edit and delete my pokemon.

Steps

• use connect(graphql(query1, propsname1), graphql(mutation1, propsname2)

Covers

• Optimistic UI

Exercise 07: Pagination

Result
As a user, I can browse my pokemons in groups of 10.

Steps

Covers

• Pagination

Using ES2015 is great, but the tutorial uses some features such as static class properties which are still in the proposal stage. In this case, I think it's important to document which features are being used outside of ES2015, and tell people how to get those Babel transforms.

I heard about this in the context of Meteor, which is relatively conservative in that it supports mostly things that have made it into an ECMAScript specification, so doesn't include static class properties.

In this case the transform is: https://babeljs.io/docs/plugins/transform-class-properties/

But there might be others.

After clicking 'Get GraphQL Endpoint (via Github)' on the Get Started page it takes you to a blank screen but nothing loads. I have tried this in a couple of browsers and another computer and I experience the same thing.

In short, I can't start the interactive tutorial.

Screenshot:

I signed in through Github before downloading files, but when I run the custom-made TrainerQuery:
Trainer(name: "[email protected]") { name }
the response returns null.

I had to add "react-native-experimental-navigation": "0.26.10", to the dependencies to get this to work because there is apparently a bug in 0.26.11 and it throws an error that style "left" is not supported in native animated, or something to that effect.

This isn't a huge deal but, being a big pokemon fan, I know that this bugged me throughout the entire tutorial. Pokemon is a word with no plural form. Similar to words like sheep, aircraft, and deer, the plural form of the word is the same as the singular form. It's never correct to say 'pokemons' just like it's never correct to say 'sheeps'.

I'd have submitted a PR for this, but there's a lot of images and code with the issue, not only text on the website.

From someone who submitted an issue on twitter: "I was going through the react native tutorial on learnapollo.com but the TrainerQuery always returns a null."

Hi,

I'm walking through the tutorial for React (great work, btw!) and I find in the later chapters (certainly exercise 5 onwards, not sure if that was the case before that), npm install never installs react-scripts, resulting in npm start throwing the error, of course.

I always have to manually npm i -S react-scripts, after which it then works fine.

Not sure why the initial npm install fails to do the job here...

I'm on Win10 64bit, btw.

Cheers.

First of all, super awesome initiative, super thankful for making Apollo easier to learn every day.

Now onto this particular issue: in the video tutorial, the permissions asked by github are only for public account info, but in my case when I tried to authorize the app with Github, it also asked for all info about my public repos, including write access to code, settings, webhooks and deploy keys. I think these permissions are way too much, and feels like they are not really needed. Is this intentional though? If it is, what is this being used for?

Thanks again for the hard work, and sorry if any of this does not make sense

Loved the React Tutorial!

In the tutorial, you do the wonderful thing of setting up a client data interface for us to an existing back-end: networkInterface: createNetworkInterface({ uri: 'https://api.graph.cool/simple/v1/cix0ooaws024k0132n9tbc5p9'}),

It would be nice to have an Excursion or Track specifically on the data layer. Specifically, it would be great to see an excursion demonstrating no data back-end (using graphql-tools mocking features), and then a conversion of that no data back-end environment to the creation of a back-end. With enough topics (e.g., pulling from two data sources within one qraphql query), this might even be more than an Excursion, and instead a separate Track!

Thanks!

I think we usually just call it "Apollo Client" rather than "The Apollo Client".

"Download Example" button lead to an "Internal Server Error" on this screen (https://www.learnapollo.com/tutorial-react/react-01)

~ 20:49

an empty page with the text "redirecting to introduction/get-started" appears and just stays there

Loved the React Tutorial!

In the tutorial, you use syntax like: className='link dim grow mw4 bg-white ma2 pa3 shadow-1'

Could you do an Excursion on these css short-names and provide some reference information so that the reader can understand what terms like "ma2" and "pa3" mean?

Thanks!

Great project, this is just a question, does LearnApollo already support the Angular.js learning path?

It might be helpful to add inline links to specific sections in the official GraphQL docs.

e.g.

We will use fragments and learn how they can be used to define data requirements that are co-located with the component requiring that data.

idk if this has been covered, but I can't find the source of the completed app.

I know the goal is to get people to go through the tutorial, but it'd be dope to actually just download the source instead of saying "Source code" in the readme and linking to the tutorial.

2.1 emphasizes the use of their new Component based methodology, with things like the <Query> and <Mutation> component. They've pushed for it to the point that it is quickly becoming difficult to find documentation for the 2.0 methods used in learnapollo.

A full update to 2.1 for apollo sections seems to be in order.

The ESLint plugins from react-scripts are not listed as dependencies in package.json and are never installed on my system when running npm i

When starting the React track, I logged in with Github, downloaded the files as requested in the tutorial, got my endpoint: https://api.graph.cool/simple/v1/cj3n46i1777ou01732xhk4q6q and started running the examples.

I had no issues at first, but as soon as I got to the second lesson (https://www.learnapollo.com/tutorial-react/react-02) and tried to query for my "Trainer" entry, I realized the server would always return null. It seems that for some reason no entities have been created in my API instance.

This is confirmed by trying to run queries using GraphiQL - all queries return null.

https://github.com/learnapollo/learnapollo/blame/master/content/tutorial-react/react-07.md#L157

render here has a side effect that modifies that application state - namely, it changes the current route. I think a better way to handle this would be in a react-router onEnter hook. At least, I'd recommend calling out in a comment that this isn't a best practices, but suffices for the purposes of the tutorial.

Thanks for the great work!

General

• proof-read (content/language) @stubailo @marktani
• add switch between tutorial tracks @schickling #2
• provide zip file after Git auth @schickling
• migrate to new usage of fragments

Tutorial Tracks

• React @marktani
  • do all the exercises from start to finish
  • 01 - start with plain react app, add apollo to solution
  • iterate on 06 - Multiple Mutations (updateQueries?)
  • 07 - Pagination
  • 01 - add error handling in render function
• Angular 2 @gsans @kamilkisiela
  • finish first draft of app and texts
• React-Native @tychota
  • finish first draft of app and texts

Excursions

• Redux DevTools @tychota
• Mutation Results and Optimistic UI @marktani
• Think of more excursions

The user of the tutorial must import { pokemonCardFragments } from './PokemonCard' in their PokemonPage.js file in order to get the program to work. It would be helpful to mention it somewhere in the tutorial.

Here is the page https://www.learnapollo.com/tutorial-react-native/react-native-04.

Thanks for this tutorial, I liked it, but this only covers apollo client, what about the server? I would like to see a tutorial on the apollo server.

Motivation

https://blog.expo.io/exponent-expo-b172fb6725a7#.q5bgv4t5q

Next steps

I will do this 90% sure this week end, unless someone did it before