Web Developers : 15-Construct a Shop Details Interface with GraphQL Querying FaunaDB by Shop ID

Screenshot from the tutorial

Building a Shop Details Interface with GraphQL and FaunaDB

In the world of web development, efficient data management is crucial, especially when building interfaces that rely on dynamic content. In this tutorial, we'll walk through the process of constructing a shop details interface using GraphQL to query data from FaunaDB. This blog post is inspired by the YouTube video titled "Web Developers: Construct a Shop Details Interface with GraphQL Querying FaunaDB by Shop ID."

What You Will Learn

By the end of this tutorial, you will be able to:

1. Understand the basics of GraphQL and FaunaDB.
2. Set up a GraphQL server to handle queries.
3. Create a simple shop details interface that fetches data by Shop ID.

Prerequisites

Before diving in, ensure you have the following:

• Basic knowledge of JavaScript and React.
• Node.js installed on your machine.
• An account with FaunaDB.

Setting Up FaunaDB

1. Create a FaunaDB Account: If you haven't already, sign up for a free account on FaunaDB.

2. Create a Database: Once logged in, create a new database called ShopDB.

3. Define a Collection: In your new database, create a collection named shops. This is where you will store your shop data.

4. Insert Sample Data: Populate the shops collection with some sample data. Here’s an example of what the data might look like:

   {
     "data": {
       "name": "Cool Shop",
       "description": "A shop for cool gadgets.",
       "location": "123 Cool St, Cool City",
       "id": "shop-001"
     }
   }
   

Setting Up the GraphQL Server

Install Dependencies

Create a new Node.js project and install the necessary dependencies:

mkdir shop-details-interface
cd shop-details-interface
npm init -y
npm install express express-graphql graphql faunadb

Create the GraphQL Schema

Create a new file named schema.js and define your GraphQL schema:

const { GraphQLObjectType, GraphQLString, GraphQLSchema, GraphQLID } = require('graphql');
const faunadb = require('faunadb');
const q = faunadb.query;

const client = new faunadb.Client({ secret: 'YOUR_FAUNADB_SECRET' });

const ShopType = new GraphQLObjectType({
  name: 'Shop',
  fields: () => ({
    id: { type: GraphQLID },
    name: { type: GraphQLString },
    description: { type: GraphQLString },
    location: { type: GraphQLString },
  }),
});

const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields: {
    shop: {
      type: ShopType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        return client.query(
          q.Get(q.Ref(q.Collection('shops'), args.id))
        ).then(res => res.data)
          .catch(err => console.error(err));
      },
    },
  },
});

module.exports = new GraphQLSchema({
  query: RootQuery,
});

Create a Server

Now, create a file named server.js to set up the Express server:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const schema = require('./schema');

const app = express();

app.use('/graphql', graphqlHTTP({
  schema,
  graphiql: true,
}));

const PORT = process.env.PORT || 4000;

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Run the Server

Open your terminal and run the server using:

node server.js

Visit http://localhost:4000/graphql in your browser, and you should see the GraphiQL interface.

Querying the Shop Details

To fetch shop details by ID, use the following GraphQL query in the GraphiQL interface:

{
  shop(id: "shop-001") {
    id
    name
    description
    location
  }
}

This query will return the details of the shop with the ID shop-001.

Creating a Frontend Interface

For the frontend, you can use React to create a simple user interface that allows users to input a Shop ID and displays the corresponding shop details.

1. Set Up a React App:

   npx create-react-app shop-details-client
   cd shop-details-client
   npm install apollo-client apollo-cache-inmemory apollo-link-http @apollo/react-hooks graphql
   

2. Create a Simple Component:

Create a new file named ShopDetails.js in the src directory:

import React, { useState } from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_SHOP = gql`
  query GetShop($id: ID!) {
    shop(id: $id) {
      id
      name
      description
      location
    }
  }
`;

const ShopDetails = () => {
  const [shopId, setShopId] = useState('');
  const { loading, error, data } = useQuery(GET_SHOP, {
    variables: { id: shopId },
    skip: !shopId,
  });

  return (
    <div>
      <input
        type="text"
        placeholder="Enter Shop ID"
        value={shopId}
        onChange={(e) => setShopId(e.target.value)}
      />
      {loading && <p>Loading...</p>}
      {error && <p>Error fetching data</p>}
      {data && data.shop && (
        <div>
          <h2>{data.shop.name}</h2>
          <p>{data.shop.description}</p>
          <p>{data.shop.location}</p>
        </div>
      )}
    </div>
  );
};

export default ShopDetails;

3. Integrate Apollo Client:

In your src/index.js, integrate Apollo Client:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
import App from './App';
import './index.css';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

4. Use the Component:

Include ShopDetails in your main App.js:

import React from 'react';
import ShopDetails from './ShopDetails';

const App = () => {
  return (
    <div>
      <h1>Shop Details Interface</h1>
      <ShopDetails />
    </div>
  );
};

export default App;

Conclusion

You have successfully built a shop details interface using GraphQL and FaunaDB! This tutorial covered setting up a GraphQL server, querying data, and creating a simple frontend to display the shop details. With this foundation, you can expand your application and add more features as needed.

Feel free to explore the FaunaDB documentation for more advanced querying options and capabilities. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios