next-apollo-graphql-setup/README.md

This is a next-apollo-graphql setup to start develop your web site. This setup uses server side rendering.

🚀 Getting Started

To start the development server, you need to run the following commands below.

npm install
npm run dev

Open http://localhost:3000 with your browser to see the result.

Our application runs on port 3000, and GraphQL server also runs on port 3005.

⚡ Using Query

You can easily use Query component to send queries to the GraphQL server. Just pass your query to the Query component.

<Query query={ARTICLES_QUERY}>
    {({ data: { articles } }) => {
        return <Articles articles={articles} />;
    }}
</Query>

Use the withApollo HOC to wrap your pages.

// ./frontend/pages/articles.js
import Layout from '../components/Layout/Layout'
import SEO from '../components/SEO/SEO'
import Query from '../components/Query/query'
import ARTICLES_QUERY from '../apollo/queries/articles/articles';
import { withApollo } from '../lib/apollo';


const Articles = () => {
    return (
        <>
            <SEO pageTitle='Articles page' />
            <Layout>
                <h1>Articles page</h1>
                <div>
                    <Query query={ARTICLES_QUERY}>
                        {({ data: { articles } }) => {
                            return articles.map(art => {
                                return (
                                    <div key={art.id}>
                                        <p>
                                            title: {art.title} <br />
                                            id: {art.id}
                                        </p>
                                    </div>
                                )
                            })
                        }}
                    </Query>
                </div>
            </Layout>
        </>  
    )
  
}

export default withApollo(Articles)