conventional-tan

How to do SSR with graphql

Hi. I'm trying to do SSR with graphql here, but im unsure how to implement it correctly in tanstack start. I've only been able to do it on the clientside so far, following https://tanstack.com/query/latest/docs/framework/react/graphql I believe I should implement server functions https://tanstack.com/start/latest/docs/framework/react/server-functions but I'm not quite sure how to implement this with graphql. has anyone been able to do graphql SSR on tanstack start? would love some pointers.

GraphQL | TanStack Query React Docs

Because React Query's fetching mechanisms are agnostically built on Promises, you can use React Query with literally any asynchronous data fetching client, including GraphQL! Keep in mind that React Q...

Server Functions | TanStack Start React Docs

What are Server Functions? Server functions allow you to specify logic that can be invoked almost anywhere (even the client), but run only on the server. In fact, they are not so different from an API...

3 Replies

rising-crimson•4mo ago

you could use apollo

eastern-cyan•4mo ago

There is an own package for integrating Apollo with TS Start. Not sure if it's part of an official release yet: https://github.com/apollographql/apollo-client-integrations/blob/pr/tanstack-start/packages/tanstack-start/README.md

GitHub

apollo-client-integrations/packages/tanstack-start/README.md at pr/...

Apollo Client support for the Next.js App Router. Contribute to apollographql/apollo-client-integrations development by creating an account on GitHub.

conventional-tanOP•4mo ago

I've decided to stick with graphql-request instead. I've figured out how to do it through Route loader. thanks for the recommendations though!

export const Route = createFileRoute('/blog/$slug')({
  component: RouteComponent,
  loader: async ({ params }) => {
    const data = await request<{ post: PostDetail }>(WP_GRAPHQL_URL, PostQuery, { id: params.slug })
    return data.post
  },
  head: ({ loaderData }) => ({
    meta: loaderData
      ? seo({
          title: loaderData.title,
          description: loaderData.seo?.metaDesc,
          image: loaderData.featuredImage?.node.sourceUrl,
          pathname: `/blog/${loaderData.slug}`,
        })
      : undefined,
    links: loaderData ? [{ rel: 'canonical', href: `${WEBSITE_HOST_URL}/blog/${loaderData.slug}` }] : undefined,
  }),
})

export const Route = createFileRoute('/blog/$slug')({
  component: RouteComponent,
  loader: async ({ params }) => {
    const data = await request<{ post: PostDetail }>(WP_GRAPHQL_URL, PostQuery, { id: params.slug })
    return data.post
  },
  head: ({ loaderData }) => ({
    meta: loaderData
      ? seo({
          title: loaderData.title,
          description: loaderData.seo?.metaDesc,
          image: loaderData.featuredImage?.node.sourceUrl,
          pathname: `/blog/${loaderData.slug}`,
        })
      : undefined,
    links: loaderData ? [{ rel: 'canonical', href: `${WEBSITE_HOST_URL}/blog/${loaderData.slug}` }] : undefined,
  }),
})

Gaming

Programming

How to do SSR with graphql

Did you find this page helpful?