Project Structure

This plugin is based on base-fe. This has additional capablities to connect with backend through apollo graphql.

Overview

The graphql-fe plugin provides the core setup necessary for configuration with graphql apollo client setup and sets the stage for integrating additional plugins via an automated process.

Apollo Client Setup

This setup provides a robust configuration for using Apollo Client in a React application. It supports both authenticated and unauthenticated scenarios and includes WebSocket support for GraphQL subscriptions.

Features

• Authenticated and Unauthenticated Scenarios: Manages separate Apollo Client instances based on the presence of an authentication token.
• WebSocket Support: Includes setup for GraphQL subscriptions using WebSocket links.
• Network Error Handling: Captures network-related errors globally and exposes them via a custom React hook.
• Dynamic Instance Management: Apollo Client instances are dynamically managed and can be reset as needed.

Installation steps

1. If this is a client project created using gs-framework, run the command:

npx create-gs-project@latest add graphql-fe

Post Installation steps

1. yarn install or npm install
2. Create a .env.development file with all the variables present in the .env.example file or run cp .env.example .env.development.
3. Run npm run codegen to generate hooks for the queries and mutations.
4. To run the project in ios prebuild environment: npm run ios
5. To run the project in android prebuild environment: npm run android
6. To run the project in web prebuild environment: npm run web.
7. To run the project in expo go: npm start and then select the device. This is just a sandbox, some features might not work in this environment.

Backend Dependency

This plugin doesn't depend on any base-be plugin. Please read the guidelines on how to run that in the backend-plugins.

Structure

• graphql : all the graphql related queries, mutations and auto generated hooks lies here.
  • base
    • queries This file contains a basic getHello query to ensure the connection with backend.
    • hooks: All the hooks according to the queries are generated here. We need to run npm run codegen on root to update these auto generated hooks.

Usage

Initialization

This has been done in the root layout file. Import the useApollo hook in your React component to initialize the Apollo Client:

import { useApollo } from '@/graphql/apollo/clientFactory';

const MyComponent = () => {
  const { client, networkError, clearNetworkError } = useApollo({}, 'your-token');
  // Use `client` for Apollo queries, mutations, and subscriptions
  // Use `networkError` to handle global network errors
  return (
    // Your component JSX
  );
};

Handling Network Errors

Network errors are exposed through the useApollo hook and can be used to display error messages or take other actions:

if (networkError) {
  return <div>Error: {networkError.message}</div>;
}

Resetting Apollo Client

To reset Apollo Client instances (e.g., on user logout), use the resetApolloClient function:

import { resetApolloClient } from "@/graphql/apollo/clientFactory";

// Call this function when you need to reset the Apollo Client instances
resetApolloClient();

Configuration

The Apollo Client setup is configured to handle both HTTP and WebSocket connections. Ensure that the environment variables EXPO_PUBLIC_GRAPHQL_URL and EXPO_PUBLIC_WS_URL are set correctly in your environmen file.

Root layout

function RootLayoutNav() {
  const { client, networkError, clearNetworkError } = useApollo({}, "");

  return (
    <ApolloProvider client={client}>
      <GluestackUIProvider config={config}>
        <Stack options={{ headerShown: false }} />
      </GluestackUIProvider>
    </ApolloProvider>
  );
}