How to implement GraphQL Server & Query the Data from React Native app

How to implement GraphQL Server & Query the Data from React Native app

Getting started with GraphQL in React Native, you will learn how to implement a simple GraphQL server and query the data from a React Native app. Learn how to set up your own GraphQL server using Apollo, use an existing REST API as its data source, consume the data from a React Native app, and display it to the user.

GraphQL’s adoption is increasing, and for good reason. Many believe it’s the future for API’s, and big companies (GitHub, Coursera, PayPal, Shopify) using it just sparks the developer interest even further.

It’s really an exciting time to learn GraphQL, especially for React Native developers because the apps that we create usually communicate with a server. GraphQL makes it easier for us to get the specific data we want with less code. Gone are the days where we have to hit multiple endpoints just to get the data we want from a REST API.

In this tutorial, you will learn how to implement a simple GraphQL server and query the data from a React Native app.

Prerequisites

Basic knowledge of React Native and Node.js is required to follow this tutorial.

The following package versions are used in this tutorial:

  • Node 11.2.0
  • Yarn 1.13.0
  • React Native CLI 2.0.1
  • React Native 0.59.5

If you encounter any issues getting the app to work, try using the above versions instead.

App overview

We will build a Pokemon viewer app. This will pick a random Pokemon and display it on the screen. When the user taps on it, a new Pokemon will be fetched. It’s really simple but it’s still going to demonstrate how to implement the full GraphQL stack.

Bootstrapping the app

To ensure compatibility, clone the GitHub repo for this project:

    git clone https://github.com/anchetaWern/RNGraphQL

This contains the package.json file for both the server and the React Native app. The starter branch contains the starting point for this tutorial:

    git checkout starter

Once you’ve switched branches, you can go ahead and install the dependencies and re-create the android and ios folders for the app:

    yarn
    react-native eject

That will install all the GraphQL-related packages that we’re going to need in the app. Later on, you’ll learn what each one does once we proceed to code the client side.

Lastly, we also need to install the server dependencies:

    cd server
    yarn

Creating the GraphQL server

In this section, we will be creating the GraphQL server using Apollo. As you might already know, GraphQL is only a specification, not an implementation. That’s why we need something like Apollo to implement it.

Apollo is a platform which provides us with all the tools needed for implementing a GraphQL server. This includes both the server and the client. The server component is used for defining the schema and resolvers (provides instructions on how to turn a specific GraphQL operation into data). On the other hand, the client component is responsible for providing tools that we can use for querying the server and binding the results to the UI.

Defining the schema

The first step in creating a GraphQL server is for us to define the schema. This is where you strictly define what data your API is managing. In this case, we’re handling basic Pokemon data.

If you’ve seen the demo gif earlier, you know exactly which Pokemon data we’re working with:

  • Name
  • Image
  • Types
  • Description

But aside from that, we also need to define the queries that the server is going to handle. In this case, we’re using the PokéAPI as our direct data source so our queries will be limited by the endpoints they’re exposing. We’re only going to need a few data from these endpoints so it’s fine if we use them directly:

  • /pokemon/{id} - used for getting the Pokemon data.
  • /pokemon-species/{id} - used for getting the description text.

With that in mind, we know that we can only have queries which accept the ID of the Pokemon as its argument.

Note: We’re not really going to cover caching in this tutorial, but it’s important to implement it if you’re going to use an existing REST API as a direct data source. That way, you won’t get throttled from using the API too much. PokéAPI is actually limited to 100 API requests per IP address per minute.

Now we’re ready to define the schema. Create a server/schema.js file and add the following code:

    const { gql } = require('apollo-server');

    const typeDefs = gql`
      type Query {
        pokemon(id: ID!): Pokemon
      }

      type Pokemon {
        id: ID!
        name: String
        desc: String
        pic: String
        types: [PokemonType!]!
      }

      type PokemonType {
        id: Int!
        name: String!
      }
    `;

    module.exports = typeDefs;

Breaking down the above code, we first imported the apollo-server package. This allows us to define the GraphQL schema. The schema includes the shape of the data we expect to return, as well as the shape of the queries.

Let’s first start with the Query type which describes what data we can fetch. In this case, we only want the user to fetch Pokemon data so the query is named pokemon. To specify arguments, you need to put them inside the parentheses right after the name of the query. In this case, we want the users to supply the ID of the Pokemon. An exclamation is added after it to indicate that it is a required argument. After that, we specify the return data after the colon (Pokemon). This is a custom GraphQL object type which we’ll define next:

    type Query {
      pokemon(id: ID!): Pokemon
    }

Next, we need to define the Pokemon object type. This is where we specify all the properties (and their data type) that are available for this particular type. Most of the properties that we need to expose are only scalar types (ID and String):

  • ID is a unique identifier for a specific object of this type. An exclamation is added after it which means it cannot have a value of null.
  • String is just your usual primitive type for storing string values.
  • PokemonType is yet another object type. The types property is used for storing an array of objects so we also have to break down the object to its expected properties:
    type Pokemon {
      id: ID!
      name: String
      desc: String
      pic: String
      types: [PokemonType]
    }

Here’s the definition of the PokemonType:

    type PokemonType {
      id: Int
      name: String
    }

You can find more types on this cheat sheet.

Connect to a data source

Now that we’ve defined our schema, the next step is to connect to a data source. Apollo comes with a data source API, which you could use to easily connect to an existing database or a REST API. As mentioned earlier, we will be using PokéAPI as our data source. This API provides Pokemon data from all of the Pokemon games so it’s perfect for our needs.

Create a server/datasources/poke.js file and add the following:

    const { RESTDataSource } = require('apollo-datasource-rest');

    class PokeAPI extends RESTDataSource {
      constructor() {
        super();
        this.baseURL = 'https://pokeapi.co/api/v2/';
      }

      pokemonReducer(pokemon, pokemonSpecies) {
        return {
          id: pokemon.id || 0,
          name: pokemon.name,
          desc: this.getDescription(pokemonSpecies.flavor_text_entries),
          pic: pokemon.sprites.front_default, // image URL of the front facing Pokemon
          types: this.getTypes(pokemon.types)
        };
      }

      getDescription(entries) {
        return entries.find(item => item.language.name === 'en').flavor_text;
      }

      getTypes(types) {
        return types.map(({ slot, type }) => {
          return {
            "id": slot, // the type's index
            "name": type.name // the type's name (e.g. electric, leaf)
          }
        });
      }

      async getPokemonById({ id }) {
        const pokemonResponse = await this.get(`pokemon/${id}`);
        const pokemonSpeciesResponse = await this.get(`pokemon-species/${id}`);
        return this.pokemonReducer(pokemonResponse, pokemonSpeciesResponse);
      }
    }

    module.exports = PokeAPI;

If you’ve consumed any sort of REST API before (and I assume you have), the code above should easily make sense to you. The apollo-datasource-rest package really makes this simple. This package exposes the RESTDataSource class which allows us to make a request to a REST API:

    const pokemonResponse = await this.get(`pokemon/${id}`); // this.post for POST requests
    const pokemonSpeciesResponse = await this.get(`pokemon-species/${id}`);

From there, all we had to do was to extract the data that we need. The only thing you need to remember is that the data you’re extracting should correspond to the properties that you’ve defined earlier in your schema: id, name, desc, pic, and types:

    pokemonReducer(pokemon, pokemonSpecies) {
      return {
        id: pokemon.id || 0,
        name: pokemon.name,
        desc: this.getDescription(pokemonSpecies.flavor_text_entries),
        pic: pokemon.sprites.front_default, // image URL of the front facing Pokemon
        types: this.getTypes(pokemon.types)
      };
    }

Define the resolvers

The final piece of the puzzle is the resolvers. The resolvers allow us to define the mapping of the queries you’ve defined in your schema to the data source method which returns the data. It follows the format:

    fieldName: (parent, args, context, info) => data;

Here’s what each one does:

  • parent - an object that contains the result returned from the resolver on the parent type. This is always blank (_) because it refers to the root of the graph.
  • args - an object containing the arguments passed to the field. In this case, our query only accepts the id of the Pokemon. We then need to pass the id to the data source method (getPokemonById()) as an object property because that’s how we defined it earlier on the server/datasources/poke.js file.
  • context - this is where we can access our data sources. We can extract the data source from the dataSources property.
  • info - an object which contains information about the execution state of the operation. We don’t really need to use it in this case so we just won’t supply it at all.

To define the resolver, create a server/resolvers.js file and add the following:

    module.exports = {
      Query: {
        pokemon: (_, { id }, { dataSources }) =>
          dataSources.pokeAPI.getPokemonById({ id })
      }
    };

Creating the server

The final step in implementing the GraphQL server is to bring everything together. Create a server/index.js file and add the following:

    const { ApolloServer } = require('apollo-server');
    const typeDefs = require('./schema');
    const resolvers = require('./resolvers');

    const PokeAPI = require('./datasources/poke');

    const server = new ApolloServer({
      typeDefs,
      resolvers,
      dataSources: () => ({
        pokeAPI: new PokeAPI()
      })
    });

    server.listen().then(({ url }) => {
      console.log(`GraphQL Server is running at ${url}`);
    });

In the above code, we import the ApolloServer class from the apollo-server package. This allows us to fire up an Apollo server which accepts an object containing the schema, resolvers, and data sources we’ve defined earlier.

At this point, you can now run the server:

    cd server
    yarn start

You can play around with it by accessing http://localhost:4000/ on your browser.

If you get a blank screen, delete the node_modules folder and yarn.lock file. After that, remove the dependencies property in the package.json file and re-install the dependencies with the following command:

    yarn add [email protected] [email protected] [email protected]

From there, you can view the schema that we’ve defined earlier by clicking on the SCHEMA tab located on the right part of the screen:

But this interface is mostly used for testing out your queries. In this case, we want to fetch the Pokemon with the ID of 25:

    query GetPokemonByName {
      pokemon(id: 25) {
        id,
        name,
        desc,
        pic
      }
    }

That will return the following result:

    {
      "data": {
        "pokemon": {
          "id": "25",
          "name": "pikachu",
          "desc": "Its nature is to store up electricity. Forests\nwhere nests of Pikachu live are dangerous,\nsince the trees are so often struck by lightning.",
          "pic": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png"
        }
      }
    }

What if we also want to get the types of the Pokemon? Intuitively, we would just add types to the properties we’ve specified:

    query GetPokemonByName {
      pokemon(id: 25) {
        id,
        name,
        desc,
        pic,
        types
      }
    }

But that’s going to return an error:

The error says:

The field types of type [PokemonType] must have a selection of subfields.

This means that you also need to specify the subfields that you want to fetch like so:

    query GetPokemonByName {
      pokemon(id: 25) {
        id,
        name,
        desc,
        pic,
        types {
          id,
          name
        }
      }
    }

That will return the following:

    {
      "data": {
        "pokemon": {
          "id": "25",
          "name": "pikachu",
          "desc": "Its nature is to store up electricity. Forests\nwhere nests of Pikachu live are dangerous,\nsince the trees are so often struck by lightning.",
          "pic": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png",
          "types": [
            {
              "id": 1,
              "name": "electric"
            }
          ]
        }
      }
    }
Building the app

Now that we’re done implementing the server, it’s time for us to add the code for the React Native app. Open the App.js file and add the following:

    import React, { Component } from "react";
    import { View, Text, ActivityIndicator } from "react-native";

    import { ApolloProvider, Query } from "react-apollo";
    import ApolloClient from "apollo-boost";
    import gql from "graphql-tag";

Here’s what each package does:

  • apollo-boost - used for connecting to an Apollo server.
  • react-apollo - provides React components that allows us to fetch data from the Apollo server.
  • graphql-tag - used for parsing GraphQL queries into a format understood by the Apollo client.

Next, connect to the server that we created earlier. Replace the placeholder with your machine’s internal IP address. Be sure that your machine and your device are connected to the same network when you do so. You can also use ngrok if you want:

    const client = new ApolloClient({ uri: 'http://YOUR_INTERNAL_IP_ADDRESS:4000/graphql' })

Next, import the component for rendering the Pokemon data as well as the helper function for generating random integers:

    import Pokemon from "./src/components/Pokemon";
    import getRandomInt from "./src/helpers/getRandomInt";

Next, we’re going to use the Context API so we can pass the Pokemon data through the component tree without having to pass props needed by the Pokemon component down manually at every level:

    export const AppContext = React.createContext({ data: { pokemon: null } });

Next, create the component and declare its default state. The query contains the same query that we used earlier. We’re putting it in the state so the component will re-render every time we update it:

    export default class App extends Component {

      state = {
        query: null
      }

      // next: add componentDidMount
    }

Once the component is mounted, we generate the query and update the state:

    componentDidMount() {
      const query = this.getQuery();
      this.setState({
        query
      });
    }

Here’s the getQuery() function. This generates a random ID and uses it for the query:

    getQuery = () => {
      const randomID = getRandomInt(1, 807);
      return `
        query GetPokemonById {
          pokemon(id: ${randomID}) {
            id,
            name,
            desc,
            pic,
            types {
              id,
              name
            }
          }
        }
      `
    }

In the render() method, the <ApolloProvider> component is where we pass the client we created with the ApolloClient earlier. Then we add the <Query> component as its child, this is where you pass the query. Don’t forget to parse the query with the gql module. By default, loading will have a value of true. In that case, we show a loading animation. Once the server responds, it can either be an error or data. The data contains the same data you saw earlier when we tried running some queries. From there, we just pass the Pokemon data and the function for fetching a new one to the app’s context:

    render() {
      const { query } = this.state;
      if (!query) return null;

      return (
        <ApolloProvider client={client}>
          <Query query={gql`${query}`} >
            {({ loading, error, data }) => {
              if (loading || error) return <ActivityIndicator size="large" color="#0000ff" />
              return (
                <AppContext.Provider value={{...data.pokemon, onPress: this.onGetNewPokemon}} style={styles.container}>
                  <Pokemon />
                </AppContext.Provider>
              )
            }}
          </Query>
        </ApolloProvider>
      );
    }

Here’s the onGetNewPokemon() function:

    onGetNewPokemon = () => {
      const query = this.getQuery();
      this.setState({
        query
      });
    }

getRandomInt helper

Here’s the helper for generating random integers. Create the src/helpers folder to house it:

    // src/helpers/getRandomInt.js
    const getRandomInt = (min, max) => {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    export default getRandomInt;

Pokemon component

The Pokemon component is used for displaying the Pokemon data. Create a src/components folder to house it.

Start by importing the packages we need:

    // src/components/Pokemon.js
    import React from 'react';
    import { View, Text, Image, FlatList, TouchableOpacity } from 'react-native';
    import { AppContext } from '../../App'; // import the context we exported earlier on the App.js file

Next, render the component. Wrap it in <AppContext.Consumer> so you get access to the data and the onPress function that we passed to the context earlier. From there, it’s just a matter of displaying the data using the right components:

    const Pokemon = () => {
      return (
        <AppContext.Consumer>
          {
            ({ name, pic, types, desc, onPress }) =>
            <TouchableOpacity onPress={onPress}>
              <View style={styles.mainDetails}>
                <Image
                  source={{uri: pic}}
                  style={styles.image} resizeMode={"contain"} />
                  <Text style={styles.mainText}>{name}</Text>

                  <FlatList
                    columnWrapperStyle={styles.types}
                    data={types}
                    numColumns={2}
                    keyExtractor={(item) => item.id.toString()}
                    renderItem={({item}) => {
                      return (
                        <View style={[styles[item.name], styles.type]}>
                          <Text style={styles.typeText}>{item.name}</Text>
                        </View>
                      )
                    }}
                  />

                  <View style={styles.description}>
                    <Text>{desc}</Text>
                  </View>
              </View>
            </TouchableOpacity>
          }
        </AppContext.Consumer>
      );
    }

Lastly, add the styles and export the component. Most of these are just used to change the background color of the types container based on the Pokemon’s type:

    const styles = {
      mainDetails: {
        padding: 30,
        alignItems: 'center'
      },
      image: {
        width: 100,
        height: 100
      },
      mainText: {
        fontSize: 25,
        fontWeight: 'bold',
        textAlign: 'center'
      },
      description: {
        marginTop: 20
      },
      types: {
        flexDirection: 'row',
        marginTop: 20
      },
      type: {
        padding: 5,
        width: 100,
        alignItems: 'center'
      },
      typeText: {
        color: '#fff',
      },
      normal: {
        backgroundColor: '#8a8a59'
      },
      fire: {
        backgroundColor: '#f08030'
      },
      water: {
        backgroundColor: '#6890f0'
      },
      electric: {
        backgroundColor: '#f8d030'
      },
      grass: {
        backgroundColor: '#78c850'
      },
      ice: {
        backgroundColor: '#98d8d8'
      },
      fighting: {
        backgroundColor: '#c03028'
      },
      poison: {
        backgroundColor: '#a040a0'
      },
      ground: {
        backgroundColor: '#e0c068'
      },
      flying: {
        backgroundColor: '#a890f0'
      },
      psychic: {
        backgroundColor: '#f85888'
      },
      bug: {
        backgroundColor: '#a8b820'
      },
      rock: {
        backgroundColor: '#b8a038'
      },
      ghost: {
        backgroundColor: '#705898'
      },
      dragon: {
        backgroundColor: '#7038f8'
      },
      dark: {
        backgroundColor: '#705848'
      },
      steel: {
        backgroundColor: '#b8b8d0'
      },
      fairy: {
        backgroundColor: '#e898e8'
      }
    }

    export default Pokemon;
Running the app

At this point, you can now run the app:

    react-native run-android
    react-native run-ios

Conclusion

That’s it! In this tutorial, you learned the basics of using GraphQL in a React Native app. Specifically, you learned how to set up your own GraphQL server using Apollo, use an existing REST API as its data source, consume the data from a React Native app, and display it to the user.

Even though we’ve implemented the full stack on this tutorial, there’s still a lot more to learn. Be sure to check out the GraphQL and Apollo docs to learn more.

You can view the source code of the app on this GitHub repo.

Curious Use Cases of GraphQL (and The Future of GraphQL)

Curious Use Cases of GraphQL (and The Future of GraphQL)

In this GraphQL tutorial, we’ll show how developers are using GraphQL as an API gateway to accomplish things that you may have never thought possible. Curious Use Cases of GraphQL (and The Future of GraphQL). As GraphQL moves into the mainstream, the tooling & ecosystem has grown and has made it possible to do much more with GraphQL than using it as just a data layer.

As GraphQL moves into the mainstream, the tooling & ecosystem has grown and has made it possible to do much more with GraphQL than using it as just a data layer. In this talk, I’ll show how developers are using GraphQL as an API gateway to accomplish things that you may have never thought possible.

More details:

When we think of GraphQL at the resolver level, we typically associate some type of database as the resolver data source, but in practice a resolver is simply a function. What this means is that we can do much more with our GraphQL APIs & our resolvers than we ever thought possible, including things like taking existing REST APIs & transforming them into GraphQL APIs (http resolvers), passing the query to Lambda or serverless functions for processing & returning the response via a GraphQL query (for things like AI & ML), geospatial & time-based queries (passing the query to Elasticsearch), & even VR & AR apps (passing in user location / app info & using the subscription to transmit image assets). In this talk, I’ll walk through what this looks like in theory & in practice, demoing 4 different applications that implement this functionality & showing the code that make the magic happen.

GraphQL and Django Tutorial: Should you be using Django with GraphQL?

GraphQL and Django Tutorial: Should you be using Django with GraphQL?

Should you be using Django with GraphQL? Do you need GraphQL with Django? Check GraphQL and Django tutorial to find out how the language can improve your development experience.

For the past 5 years, Django has been the most effective framework for making quick web applications, API Endpoints, or Admin panels for other applications.

One of the biggest advantages of Django is its ability to enable users to write less code and get started quicker, especially if you’re including an admin panel and a fully-manageable database migration process as base functionality.

Django Rest Framework—an external toolkit—makes it easy to build API endpoints. It basically wraps full CRUD API around the Django Model with just a few lines of code.

This means that building any basic CRUD API with Django helps to keep more of a development focus on UI parts, which are key elements of all software products.

Similarly, GraphQL aims to automate backend APIs by providing type strict query language and a single API Endpoint where you can query all information that you need from UI and trigger actions (mutations) to send data to the backend.

My journey with GraphQL started with Facebook’s API, where GraphQL comes from.

Naturally, GraphQL is considered to be very close to the JavaScript world, mostly because browser-based apps are the first adopters of that technology.

That’s why my first GraphQL server+client was done in Node.js and React.js. After having the first app built on top of GraphQL API, I started to use it exclusively for my Web-based projects.

Advantages of GraphQL

As you may have guessed, there is a library for Django to support GraphQL called Graphene Django, which is very similar to the Django Rest Framework.

However, there are significant differences between Django Rest and Django with GraphQL.

The key difference lies in UI usability: with Rest API, you’re getting endless URLs with specific parameter names where you have to check types and specific values.

Meanwhile, with GraphQL you’re defining mutation similar to the code below and getting strictly defined variable names and types, which become part of an automatic GraphQL type validation.

type Mutation {
  userLogin(email: String!, password: String!): UserLoginResponse
}

type UserLoginResponse {
  token: String
  error: Boolean
  message: String
}

GraphQL also comes with another bonus packaged inside its type system. It automatically generates documentation where you can get available queries and mutations with their parameters/return types.

Django Rest also generates some form of documentation, but it is not as usable as the GraphQL Playground displayed below.


If you think this type of interface is available for all kinds of GraphQL endpoints, you’re wrong — this is only available in development mode servers.

In terms of security, having one API Endpoint is naturally more manageable than having hundreds of them—especially when you consider the fact that GraphQL automatically keeps specific type rules and won’t allow requests with incorrect parameter names or values.

Django ❤️ GraphQL

Let’s make a basic setup with Django and GraphQL just to demonstrate how powerful this setup can be. On one hand, you’re getting easy CRUD management with database. On the other hand, you’re getting a very powerful API query language with a single endpoint.

Installation should be very easy. Just follow the steps defined here

The interesting parts are defining GraphQL types and queries in Python. It’s actually based on your database models, but you can also define custom queries without using Django Models.

# schema.py
from graphene_django import DjangoObjectType
import graphene
from .models import Post as PostModel
from .models import User as UserModel

class Post(DjangoObjectType):
    class Meta:
        model = PostModel
        interfaces = (relay.Node,)

    @classmethod
    def get_node(cls, info, id):
        return Post.objects.get(id=id)

class User(DjangoObjectType):
    class Meta:
        model = UserModel
        interfaces = (relay.Node,)

        posts = graphene.List(Post)

    def resolve_users(self, info):
                return Post.objects.filter(user=self)

    @classmethod
    def get_node(cls, info, id):
        return User.objects.get(id=id)

class Query(graphene.ObjectType):
    users = graphene.List(User)

    def resolve_users(self, info):
        return UserModel.objects.all()

schema = graphene.Schema(query=Query)

Now you can very easily query all users with their posts.

The most important thing to remember is that you can query fields you want, which will affect the overall load time and traffic usage on the UI side.

For larger user bases, it’s important to keep traffic low and only query the fields you need. In the case of Rest API, you will get all fields anyway.

query {
  users {
    name
    posts {
      id
    title
    content
    }
  }
}

This is the basic query outcome from the Python definition, which is pretty simple and — compared to Rest API — more expressive than you may think.

What about GraphQL Subscriptions?

GraphQL Subscriptions function as a way to tell the server to retrieve data based on a specific query whenever the data is available.

It all works with WebSockets in near-real time, which means we have to somehow include Django Websockets and configure our backend server for accepting WebSockets.

Basically, GraphQL is just an API query language interpretation that works with any kind of network transportation when handling client and server-side GraphQL language interpretation.

It may seem difficult at first, but there’s an open-source library and Django GraphQL Subscriptions over at the Django Websockets module.

# settings.py

GRAPHENE = {
    'SCHEMA_INDENT': 4,
    'MIDDLEWARE': [
        # Others middlewares
        'graphene_django_subscriptions.depromise_subscription',
    ]
}

This will be enough to handle the subscription schema later on as a Subscription query.
A quick aside: Pinterist actually works entirely on GraphQL Subscriptions, which is all built on top of Django Backend (but probably modified a lot.)

Conclusion

In my opinion, Django with GraphQL is more powerful and extensible than Django with Rest API.

However, it isn’t battle-tested and large companies are still in the process of adopting this kind of combination, but based on what you can get out of this simple configuration, imagine how much more comfortable web development will be when you use Django with GraphQL with modern technologies.

Database Design Tutorial - How to Design & Plan Database for Beginners

Database Design Tutorial - How to Design & Plan Database for Beginners

Learn how to design and plan a database for beginners. This database design course will help you understand database concepts and give you a deeper grasp of database design. Database design is the organisation of data according to a database model. The designer determines what data must be stored and how the data elements interrelate. With this information, they can begin to fit the data to the database model.

Database Design Tutorial - How to Design & Plan Database for Beginners

This database design course will help you understand database concepts and give you a deeper grasp of database design.

Database design is the organisation of data according to a database model. The designer determines what data must be stored and how the data elements interrelate. With this information, they can begin to fit the data to the database model.

⭐️ Contents ⭐
⌨️ (0:00:00) Introduction
⌨️ (0:03:12) What is a Database?
⌨️ (0:11:04) What is a Relational Database?
⌨️ (0:23:42) RDBMS
⌨️ (0:37:32) Introduction to SQL
⌨️ (0:44:01) Naming Conventions
⌨️ (0:47:16) What is Database Design?
⌨️ (1:00:26) Data Integrity
⌨️ (1:13:28) Database Terms
⌨️ (1:28:28) More Database Terms
⌨️ (1:38:46) Atomic Values
⌨️ (1:44:25) Relationships
⌨️ (1:50:35) One-to-One Relationships
⌨️ (1:53:45) One-to-Many Relationships
⌨️ (1:57:50) Many-to-Many Relationships
⌨️ (2:02:24) Designing One-to-One Relationships
⌨️ (2:13:40) Designing One-to-Many Relationships
⌨️ (2:23:50) Parent Tables and Child Tables
⌨️ (2:30:42) Designing Many-to-Many Relationships
⌨️ (2:46:23) Summary of Relationships
⌨️ (2:54:42) Introduction to Keys
⌨️ (3:07:24) Primary Key Index
⌨️ (3:13:42) Look up Table
⌨️ (3:30:19) Superkey and Candidate Key
⌨️ (3:48:59) Primary Key and Alternate Key
⌨️ (3:56:34) Surrogate Key and Natural Key
⌨️ (4:03:43) Should I use Surrogate Keys or Natural Keys?
⌨️ (4:13:07) Foreign Key
⌨️ (4:25:15) NOT NULL Foreign Key
⌨️ (4:38:17) Foreign Key Constraints
⌨️ (4:49:50) Simple Key, Composite Key, Compound Key
⌨️ (5:01:54) Review and Key Points....HA GET IT? KEY points!
⌨️ (5:10:28) Introduction to Entity Relationship Modeling
⌨️ (5:17:34) Cardinality
⌨️ (5:24:41) Modality
⌨️ (5:35:14) Introduction to Database Normalization
⌨️ (5:39:48) 1NF (First Normal Form of Database Normalization)
⌨️ (5:46:34) 2NF (Second Normal Form of Database Normalization)
⌨️ (5:55:00) 3NF (Third Normal Form of Database Normalization)
⌨️ (6:01:12) Indexes (Clustered, Nonclustered, Composite Index)
⌨️ (6:14:36) Data Types
⌨️ (6:25:55) Introduction to Joins
⌨️ (6:39:23) Inner Join
⌨️ (6:54:48) Inner Join on 3 Tables
⌨️ (7:07:41) Inner Join on 3 Tables (Example)
⌨️ (7:23:53) Introduction to Outer Joins
⌨️ (7:29:46) Right Outer Join
⌨️ (7:35:33) JOIN with NOT NULL Columns
⌨️ (7:42:40) Outer Join Across 3 Tables
⌨️ (7:48:24) Alias
⌨️ (7:52:13) Self Join