DISNEY CLONE USING GRAPHCMS GRAPHQL NEXT REACT

Build DISNEY Clone using GRAPHCMS, GRAPHQL, NEXT, REACT

Steps to Follow to accomplish this project

• Build Assets, Contents, Schemas on GRAPHCMS.
• Get GraphQL endpoint and token, set permissions for all requests.
• Build GQL queries.
• Run them on the playground.
• Start frontend app with React & Next App.
• Install required packages like graphql-request.
• Access the data from GraphQl API and build the app.
• Test the app on a running Server.

Let’s dive into the steps:

Add assets

First, you need to create your GraphCMS Account then create Assets, Schemas and Contents and their relationships.

Playground

Once you are done with Schema and relation building, build GQL queries for data fetching and mutation.

Example:

Below one to fetch all videos with specific details.

        query {
              videos {
                createdAt,
                id,
                title,
                description,
                seen,
                slug,
                tags,
                thumbnail {
                  url
                },
                mp4 {
                  url
                }
              }
            }

Fetch Specific Video by unique id

        query{
          videos(where: { id:"ckwyfg18o096k0c05j5bw1bl5"}){
            createdAt,
            id,
            title,
            description,
            slug,
            tags,
            thubnail{
              url
            },
            mp4{
              url
            }
          }
        }

Fetch Account Details

        query {
            account(where: { id: "ckwyfc4t4096b0c184nqkh2zq"}) { 
              username
              avatar {
                url
              }
            }
          }

For more reference you can have a look into the image below.

Add a .env file

After the assets are loaded, add a .env file in root folder with the following:

GRAPH_CMS_TOKEN={your_token}

ENDPOINT={your_endpoint}

Run the command below to install the packages.

npm i

Run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Enjoy Coding!