Alright, let's get started with setting up Firebase Firestore and Apollo Client in your React app. First things first, we need to install a few packages. Open up your terminal and run these commands in your project directory:

npm install @apollo/client graphql
npm install firebase

Next, we need to initialize Firebase Firestore. Create a file named firebase.js in your project directory. In this file, we'll set up Firebase Firestore.

import firebase from 'firebase';

const firebaseConfig = {
  apiKey: 'YOUR API KEY',
  authDomain: 'YOUR AUTHDOMAIN',
  projectId: 'YOUR PROJECT ID',
};

firebase.initializeApp(firebaseConfig);

export const db = firebase.firestore();

Don't forget to replace 'YOUR API KEY', 'YOUR AUTHDOMAIN', and 'YOUR PROJECT ID' with the actual values from your Firebase project.

Now, let's move on to setting up Apollo Client. Create a file named apollo.js. In this file, we'll import ApolloClient and InMemoryCache from @apollo/client and create a new instance of ApolloClient.

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

export const client = new ApolloClient({
  uri: 'YOUR FIREBASE CLOUD FUNCTION URL',
  cache: new InMemoryCache(),
});

Remember, the uri should be the URL of your Firebase Cloud Function where you'll set up a GraphQL server. We'll get to that in the next step.

To create a Firebase Cloud Function, you'll need to install the Firebase Functions SDK. Run this command:

npm install firebase-functions

Now, let's write the code for the cloud function. Create a file for your cloud functions and add the following code:

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

admin.initializeApp();
const db = admin.firestore();

const typeDefs = gql`
  type Query {
    messages: [Message]
  }
  type Message {
    id: ID!
    content: String!
  }
`;

const resolvers = {
  Query: {
    messages: async () => {
      const msgs = await db.collection('messages').get();
      return msgs.docs.map(doc => ({
        id: doc.id,
        ...doc.data(),
      }));
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });
const app = express();
server.applyMiddleware({ app, path: '/', cors: true });

exports.graphql = functions.https.onRequest(app);

In this example, we've created a single query type messages to fetch all messages from Firestore.

Finally, let's use Apollo Client in your React component to fetch and display data. Here's how you can do it:

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

const GET_MESSAGES = gql`
  query GetMessages {
    messages {
      id
      content
    }
  }
`;

function Messages() {
  const { loading, error, data } = useQuery(GET_MESSAGES);

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

  return data.messages.map(({ id, content }) => (
    <div key={id}>
      <p>{content}</p>
    </div>
  ));
}

export default Messages;

In this React component, Apollo Client fetches the messages from Firestore and displays them. Simple, right?