I Love RESTful, But It's Time for GraphQL: Everything You Should Know Before Switching in 2024

graphQl_restful

npm install apollo-server-express graphql

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

// Define your type definitions (schema)
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Define your resolvers
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

// Create an instance of Apollo Server
const server = new ApolloServer({ typeDefs, resolvers });

const app = express();

// Apply the Apollo GraphQL middleware and set the path to /graphql
server.start().then(res => {
  server.applyMiddleware({ app, path: '/graphql' });

  // Start the server
  app.listen({ port: 4000 }, () => {
    console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`);
  });
});


app.get('/api/users', async (req, res) => {
  const response = await fetch('https://api.example.com/users');
  const users = await response.json();
  res.send(users);
});


const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User]
  }
`;


const resolvers = {
  Query: {
    users: async () => {
      const response = await fetch('https://api.example.com/users');
      return response.json();
    },
  },
};


npm install @apollo/client graphql


import { ApolloClient, InMemoryCache } from '@apollo/client';

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

export default client;


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

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

reportWebVitals();


import { gql } from '@apollo/client';

export const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;


import React from 'react';
import { useQuery } from '@apollo/client';
import { GET_USERS } from './queries';

const App: React.FC = () => {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      {data.users.map((user: any) => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
};

export default App;