Data Fetching

Apollo powered declarative data fetching with GraphQL api.

Oreact is using Apollo stack for managing remote and local data in your React application.

How to Query

As discussed in Project Structure, Oreact recommends write GraphQL queries into app/graphql directory. And then load those queries into your React Components in order to call them with the help of Apollo Client.

Write GraphQL query

This article assumes you're familiar with building basic GraphQL queries. If you need a refresher, we recommend that you read this guide and practice running queries in GraphiQL.

Go to the /app/graphql and create a query file.

Example

/app/graphql/queries/getUser.graphql

query GET_USER($userId:MongoID!){
    getUser(_id: $userId){
        _id
        displayName
        updatedAt
        createdAt
        ...
    }
}

Executing a query

The useQuery React hook is the primary API for executing queries in an Apollo React application. To run a query within a React component, call useQuery and pass it a GraphQL query string.

import {useQuery} from "react-apollo";
import {GET_USER} from 'app/graphql/queries/getUser';
import {useParams} from '@oreact/core/router';

export default () => {
    const {id} = useParams();
    const {loading, error, data} = useQuery(GET_USER, {
        variables: {userId: id}
    });    

    if (loading) return 'Loading...';
    if (error) return `Error! ${error.message}`;
    return <div>{data.getUser.displayName}</div> 
}

As you have probably figured out, we are using Apollo for our data layer needs. Apollo has lots of libraries and hooks to use. Click here to learn more about React Apollo Client.