fix: Fixes Unknown Fragment issues due to GraphQL Tag type mismatch in web

[dthyresson]

Fixes: #10322

See ^^^

---

Tested that both the graphql toml config with fragments and trustedDocuments set to true works.

However, if trusted documents uses fragments seeing an intermittent Apollo issue. Investigating.

Update: Have confirm that if trusted documents uses fragments, works as expected. See note below.

Note: Had to make small fix to fragments setup to address an error when prettifying as final step.

[shivghai]

@dthyresson can I help with this?

[dthyresson]

@dthyresson can I help with this?

Sorry for the delay - "if trusted documents uses fragments seeing an intermittent Apollo issue. Investigating."

^^ I just need to confirm TD's with fragments was still working ok in a test project.

[dthyresson]

1. Confirm Trusted Documents setup and using store working
2. Confirmed fragments using useregisterFragment working.

3. Confirmed that a TD query using fragments also works
   

'69d9843ccef232ac2b27629fbb1cb913c25b1fdc':
    'fragment PostInfo on Post { __typename id title } query GetArticles { __typename articles: posts { __typename createdAt ...PostInfo } }',

[dthyresson]

Steps to reproduce:

1. Get this PR
2. Build Test Project: yarn build:test-project ~/tmp/td-f-gql-test
3. Setup TD: yarn rw setup graphql trusted-documents
4. yarn rw g types and yarn rw dev and comfit in Network tab that requests use the TD id vs the query
5. Stop dev
6. Setup fragments: yarn rw setup graphql fragments
7. new articles page: yarn rw g page articles

In ArticlesPage

import type { GetArticles } from 'types/graphql'

import { Metadata } from '@redwoodjs/web'
import { useQuery } from '@redwoodjs/web'
import { registerFragment } from '@redwoodjs/web/apollo'

registerFragment(gql`
  fragment PostInfo on Post {
    id
    title
  }
`)

const GET_ARTICLES = gql`
  query GetArticles {
    articles: posts {
      ...PostInfo
      createdAt
      # Include other fields specific to this query
    }
  }
`

const ArticlesPage = () => {
  const { data, loading } = useQuery<GetArticles>(GET_ARTICLES)

  return (
    <>
      <Metadata title="Articles" description="Articles page" />

      <h1>ArticlesPage</h1>
      {!loading &&
        data.articles.map((post) => (
          <div key={post.id}>
            {post.title} @ {post.createdAt}
          </div>
        ))}
    </>
  )
}

8. yarn rw dev
9. Navigate to /articles
10. Should see list of articles with title and createdAt timestamp

[dthyresson]

@Josh-Walker-GM Requested review as you had helped some of these setups. Also, will need a patch release. Thanks!

[dthyresson]

Original issue reproduction:

1. yarn build:test-project ~/tmp/fragment-issue
2. cd and yarn and yarn dev to test app up
3. yarn rw g page Articles

for the ArticlesPage, use the following code:

import type { GetArticles } from 'types/graphql'

import { Metadata } from '@redwoodjs/web'
import { useQuery } from '@redwoodjs/web'
import { registerFragment } from '@redwoodjs/web/apollo'

const POST_FRAGMNET = gql`
  fragment PostInfo on Post {
    id
    title
  }
`

registerFragment(POST_FRAGMNET)

const GET_ARTICLES = gql`
  query GetArticles {
    articles: posts {
      ...PostInfo
      createdAt
      # Include other fields specific to this query
    }
  }
`

const ArticlesPage = () => {
  const { data, loading } = useQuery<GetArticles>(GET_ARTICLES)

  return (
    <>
      <Metadata title="Articles" description="Articles page" />

      <h1>ArticlesPage</h1>
      {!loading &&
        data.articles.map((post) => (
          <div key={post.id}>
            {post.title} @ {post.createdAt}
          </div>
        ))}
    </>
  )
}

export default ArticlesPage

5. yarn rw g types
6. You will still see the error
   

Unknown fragment "PostInfo".GraphQL: Validation

7. run yarn rwfw project:sync with this PR
8. Type error goes away

8. yarn rw dev
9. navigate to /articles

[Josh-Walker-GM]

Paired with @dthyresson on this and confirmed it fixes the type issue.