How can I configure Laravel Lighthouse to provide server-side rendering for GraphQL?

Question

I'm using Apollo client for my React front-end to be able to use GraphQL hosted by Laravel Lighthouse.

Normal uses cases work, but I'm now finding myself facing certain cases where I'd like to pre-fetch a GraphQL result on the initial page request instead of having the browser load the page and then send a separate ajax query.

I see that Apollo client supports both "Store rehydration" and "Server-side rendering", but I haven't found any documentation within Lighthouse about how to do it.

I think my Blade view needs to contain something like this:

<script>        
    window.__APOLLO_STATE__ = '{!!$postsGqlResultJson ?? "null" !!}'; // https://www.apollographql.com/docs/react/performance/server-side-rendering/
</script>

So then the question is: how do I generate the $postsGqlResultJson?

UPDATE:

Let's say I have in the front-end:

const POSTS = gql`
    query Posts($first: Int, $page: Int) {
        posts(first: $first, page: $page, orderBy: { field: CREATED_AT, order: DESC }) {
            paginatorInfo {
                currentPage
                hasMorePages
                total
            }
            data {
                id
                ...
            }
     }
`;
const options = {
  variables: {
        first: 100,
        page: 1,
    }
};
const { loading, error, data } = useQuery(query, options);

I would think that Lighthouse might offer some sort of PHP function equivalent of useQuery, where I can somehow provide those same arguments (the POSTS gql and the options object), and it would return a JSON string of the results data, nested as described in the GQL.

Am I misunderstanding? I really appreciate your help. :-)

SR and SSR options are for precache/prerender frontend/react app state/view for different urls/routes - mode/technique used for SEO reasons in gatsby (full static content possible) or nextjs ... how your frontend/react app is served? — xadm
@xadm That's pretty cool, and I love Spatie, but I'm asking about how to call (from Laravel rather than anywhere in JS, such as Apollo) the Lighthouse function that generates the GraphQL JSON result. Thanks. — Ryan
then edit title/question .... you're looking for 'php graphql client' like github.com/softonic/graphql-client — xadm

spawnia spawnia · Accepted Answer · 2020-09-20T17:36:27

The Apollo Client features you describe seem like concerns of the frontend and assume you are serving your frontend from a Node.js server.

There is nothing special to do here in Lighthouse - from its perspective it does not matter if queries are sent as a part of server-side rendering or from the client.

How can I configure Laravel Lighthouse to provide server-side rendering for GraphQL?

1 Answers