Next.js: How to use graphql fragments with apollo?

[kolpav]

Title says it all.
I am bit confused how should I go about using graphql fragments with next and apollo.
There is graphql-tag but it is webpack loader which are not recommended.

[kolpav]

I found this approach which I don't like at all because after using componse or any HOC in general you will lose all static fields. I guess I will just export fragments and queries separately from my components.

[lfades]

I use something similar to the way https://www.learnapollo.com/ handle the fragments.

I was using the fragments outside the component, but it did not look good, so I preferred to have the query outside.

// components/header_help.js
import { gql } from 'react-apollo'
import { propType } from 'graphql-anywhere'

export default class HeaderHelp extends React.Component {
  static fragments = {
    item: gql`
      fragment ItemHeaderHelp on Item {
        totalItems
        startAt
        endAt
        expireAt
      }
    `
  }
  static propTypes = {
    // ensure that the item is the fragment that you need.
    item: propType(HeaderHelp.fragments.item).isRequired
  }
}

// utils/itemSchema.js
// all fragments works exactly as HeaderHelp
import { gql, graphql } from 'react-apollo'
import HeaderHelp from '../header_help'
import ItemHead from '../item_head'
import ItemSide from '../item_side'
import Location from '../location'
import Photos from '../photos'

const fragment = gql`
  fragment ItemIndex on Item {
    id
    ...ItemHeaderHelp
    ...ItemHead
    ...ItemSide
    ...ItemLocation
    ...ItemPhotos
  }
  ${HeaderHelp.fragments.item}
  ${ItemHead.fragments.item}
  ${ItemSide.fragments.item}
  ${Location.fragments.item}
  ${Photos.fragments.item}
`

const itemQuerySchema = gql`
  query Item($id: ID!) {
    item(id: $id) {
      ...ItemIndex
    }
  }
  ${fragment}
`

const updateItemSchema = gql`
  mutation UpdateItem($id: ID!, $item: UpdateItemInput!) {
    updateItem(id: $id, item: $item) {
      ...ItemIndex
    }
  }
  ${fragment}
`

export const itemQuery = graphql(itemQuerySchema, {
  skip: props => !props.url.query.shortId,
  options: (props) => ({
    variables: {
      id: props.url.query.shortId
    }
  })
})

export const updateItem = graphql(updateItemSchema, {name: 'updateItem'})

// components/item.js
import { itemQuery, createItem } from './utils/itemSchema'

class Item extends React.Component {...}

export default itemQuery(createItem(Item))

[arunoda]

I don't think this is exactly related to Next.js
May be you could ask it from apollo forum (similar) or from stackoverflow.

[kolpav]

Yes, sorry for not closing it earlier I just thought there is some agreed upon approach how to use fragments that I am not aware of. When usage of custom loaders is not recommended in next.js

[detrohutt]

I made this babel-plugin so you can put your queries/fragments/etc in separate files(.gql or .graphql) and import them as AST ready to be plugged into the graphql function.

[YannickB]

@detrohutt Thanks a lot, you plugin saved my day. I'd hate moving my .graphql files inside my component.

@arunoda I disagree that this issue is not related to next.js. As @detrohutt explain in his plugin documentation, the graphql queries and fragments shall be handle in separate files. The apollo/apollo-redux examples use in-component query, which is wrong IMHO.

Usually we use graphql-tag/loader in webpack to load them, but this will not work with next.js because SSR will not use webpack. This is the same problem than with other loaded file type #627 #200 .
I really think we shall one day find a way to use webpack loader for SSR so we can easily load any files. Here @detrohutt provided a babel plugin which resolved the problem, but we will not always be so lucky.

I just want to point out that graphql files is another good use case of why the lack of webpack loader is a pain for next.js. I really hope we find a solution one day, without having to rely on babel.

[kolpav]

@YannickB Does the plugin works without any problems? I am still bit reluctant to use it in production. Is there any work to be done @detrohutt ?

[YannickB]

@kolpav I don't know yet, I just made my existing graphql query loaded but I have to move forward in the development to make sure they properly execute. I'll update this comment if I see any problem.

[detrohutt]

@kolpav Someone notified me a few days ago that it doesnt work while developing on windows. Should still run fine in production on windows if you build your project on a mac/linux machine. Other than that I've had no problems with it.