DEV Community

Cover image for Full stack example using React, urql and GraphQL API - Part 1
Nicolas Penot
Nicolas Penot

Posted on • Edited on

Full stack example using React, urql and GraphQL API - Part 1

Want a real-time full-stack application online in less than a day? This post describes the steps that let any (juniors, frontend) developers spawn their backend (with Agoston.io), set the minimum configuration, and start implementing authentication, GraphQL requests, and subscription.

1. Spawn your backend

Create an account on Agoston.io. On the main page, create a new (free) backend:

Image description

After a few minutes, you have a complete and secure backend with Postgres, Postgraphile, etc.

2. Enable Google Authentication

Click on the backend name. That will lead you to the backend configuration page. On the bottom part, you will find the authentication configuration.

Enable the Google authentication and input your Client ID and Client secret (you can get one following the Google instructions here).

Image description

Callback URL: Google will ask you for the callback URL. You will find it in the configuration page, section Authentication strategies, field Callback URL.

3. Reload the backend

Necessary steps to take into account the Google authentication:

Image description

The reload last less than a minute.

4. Start a new React App

npx create-react-app agoston-example-react-urql
cd agoston-example-react-urql
npm install --save react-router-dom
npm install --save urql graphql graphql-ws
npm run start
Enter fullscreen mode Exit fullscreen mode

5. Import Graphql and create the GraphQL client

// file ./index.js

// Graphql and urql import
import { createClient, Provider, defaultExchanges, subscriptionExchange } from 'urql';
import { createClient as createWSClient } from 'graphql-ws';


// GraphQL client for websocket subscription
const wsClient = createWSClient({
  fetchOptions: () => ({
    credentials: 'include',
  }),
  url: GRAPHQL_WS_ENDPOINT, // Change the endpoint here with the one of your backend
});

// GraphQL client for standard Graphql requests
const client = createClient({
  fetchOptions: () => ({
    credentials: 'include',
  }),
  url: GRAPHQL_ENDPOINT, // Change the endpoint here with the one of your backend
  exchanges: [
    ...defaultExchanges,
    subscriptionExchange({
      forwardSubscription: (operation) => ({
        subscribe: (sink) => ({
          unsubscribe: wsClient.subscribe(operation, sink),
        }),
      }),
    }),
  ],
});

//Make the GraphQL client available for the application
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider value={client}>
    <RouterProvider router={router} />
  </Provider>
);
Enter fullscreen mode Exit fullscreen mode

Complete file on Github.

6. Add graphQL query to get the session data

// file ./routes/root.js

const AgostonSessionData = `query agostonSessionData {
    isSessionAuthenticated
    getCurrentRole
    getCurrentUserId
}`
Enter fullscreen mode Exit fullscreen mode

7. Execute the query in a component and render

// Find the login link in the configuration page, section `Authentication strategies`, field `Auth. URL`.
var AGOSTON_AUTH_GOOGLE="https://<backend_uuid>.<cluster_uuid>.backend.agoston.io/auth/google-oauth20"

Find the login link in the configuration page, section `Authentication URLs`, field `Logout current session`.
var AGOSTON_AUTH_LOGOUT="https://<backend_uuid>.<cluster_uuid>.backend.agoston.io/auth/logout"

function RootWithSessionData() {

    // Execute the query
    const [resultQuery] = useQuery({
      query: AgostonSessionData
    });

    if (resultQuery.fetching) return <p>Loading...</p>;
    if (resultQuery.error) return (
          <div>
            <p> App fails to load |  {resultQuery.error.message}</p>
          </div>
          );

    var sessionData = resultQuery.data;

    return (
        <div >
            <p className={sessionData.isSessionAuthenticated?'banner d-none':'banner'}>🔥 Authenticate yourself <a href={AGOSTON_AUTH_GOOGLE}>here</a>.</p>
            <p className={sessionData.isSessionAuthenticated?'banner':'banner d-none'}>
                🔥 Authenticated as <span className="user-id">user {sessionData.getCurrentUserId}</span> Logout <a href={AGOSTON_AUTH_LOGOUT}>here</a>.
            </p>
        </div>
      );
  };


const Root = () => {
    return (
      <div>
        <RootWithSessionData />
      </div>
    );
}
Enter fullscreen mode Exit fullscreen mode

Complete file on Github.

Conclusion

You now have your application's foundation, including your user's authentication.

The next step will be to create your data model and implement GraphQL requests (query, mutation, subscription).

Disclaimer

I'm the maker of Agoston.io which is a backend as a service leveraging tried-and-tested open-source solutions. Agoston includes: a single GraphQL endpoint, self-hosting, unified authentication, subscription, dedicated Postgres, custom code, Stripe webhooks, job scheduling, and triggers.

Top comments (0)