Skip to content
This repository has been archived by the owner on Jul 9, 2023. It is now read-only.

Latest commit

 

History

History
129 lines (81 loc) · 3.6 KB

File metadata and controls

129 lines (81 loc) · 3.6 KB

UNMAINTAINED

This repo was archived on 9 July 2023 - new examples can be found under the upleveled GitHub organization, eg. upleveled/graphql-example-spring-2023-austria-vienna

Intro

https://ramonh.dev

  • Software engineer with over 10 years experience.
  • Public speaker.
  • Community member.
  • Developer educator.
  • Live streamer.

Who are you?

One-two sentence each

What did you do so far?

Data fetching via HTTP?

Show fetching an requestion data in the browser? -> https://www.escuelafrontend.com/instructores/ramon-huidobro Why do we do this? In the end store data somewhere, retrieve it and write it to somewhere.

GraphQL

A pretty cool way to fetching data.

Why?

  • very structured and well defined
  • only fetch what you need

-> see presentation.pdf

Exercise

Hint: Using CTRL + Space you can autocomplete fields in the GraphQL IDE.

  1. Use the StarWars GraphQL API https://graphql.github.io/swapi-graphql/ to query:

Hint: The schema has some duplications of data e.g. people & edges.node contain the same data. Why's that?

  • Query all People
  • Query the names of all Starships related to Luke Skywalker!

Hint: Get Luke by his id, which you can get from allPeople.

  • Query the population and all the residents on the planet "Naboo".
  1. Use the GitHub GraphQL API to query
  • Your repositories (first 10)
  • Extend the query to show the default branch of each repository

Query data

First, create a repository on GitHub (let's base the name on the upcoming exercise. How about something like graphql-github-profile?), clone it and cd into the directory.

Then create a new React app with yarn create react-app . and install the ESLint config

Then we will go through https://www.apollographql.com/docs/react/get-started/

Exercise

Build your own Profile page based on GitHub e.g. https://github.com/nikgraf using the GitHub GraphQL Endpoint

  • Show your name
  • Show your GitHub Avatar
  • Show a list of (public) repositories

Other public APIs https://github.com/APIs-guru/graphql-apis

  1. Generate an access token: https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token

Hint:

  • yarn add @apollo/client graphql
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

const client = new ApolloClient({
  uri: "https://api.github.com/graphql",
  cache: new InMemoryCache(),
  headers: {
    authorization: "Bearer TODO",
  },
});
<ApolloProvider client={client}></ApolloProvider>
import { gql, useQuery } from "@apollo/client";

const profileQuery = gql`
  TODO: YOUR QUERY
`;

export default function Profile(props) {
  const { loading, error, data } = useQuery(profileQuery);

  return null; // TODO: render your component
}

Using Variables

Make the username dynamic and allow to fetch the profile based on the url.

When visiting the profile/:username route use the route to fetch data for only the one specific route.

Hint: Fetch one place first with a hard coded ID to see if it works and then extend it to use GraphQL variables for the profile username to always fetch the correct profile.

Hint:

const { loading, error, data } = useQuery(placeQuery, { variables: {} });