Clone the repository and run:
# install dependencies
yarn
# start development server
yarn dev
The development runs both the Express
server and the Webpack devServer
concurrently, proxying the Express
server to port 3001
. Go to http://localhost:3000
to view the application.
Any changes to server-side code will restart the server (via nodemon
) and any changes to client-side code will auto-change on the browser (via react-refresh
.)
We use GraphQL Modules in order to separate the GraphQL schema implementation into small, reusable, easy-to-implement and easy-to-test pieces with the possibility to extract them easily if necessary in the future.
Each module is made up of a schema, resolvers and their datasource which makes the relevant calls to external apis.
In order to correctly type the resolvers, once the schema has changed, run yarn generate
to create typings for the module.
The modules are collated in src/server/graphql/index
and passed to an instance of Apollo Server. When this server is started (as part of the overall Express server) the GraphQL playground is available in dev environment at /graphql
.
The server-side instance of Apollo Client is initiated in src/server/routes/application
. Using SchemaLink
allows performing GraphQL operations on the provided schema rather than making network calls when loading the page.
The client-side instance of Apollo Client is initiated in src/client/index
. The client is initiated with the value of window.__APOLLO_STATE__
which is passed to the html via src/server/routes/application
.
Queries are made within React components as and when they are required. For example:
const GET_ME = gql`
query me {
me {
firstName
}
}
`;
This query knows which resolver query to call and we want just the firstName
to be returned. We call that query within the React component:
const { error, loading, data } = useQuery(GET_ME);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return <p>{data.me.firstName}</p>