Ask Your Question
3

How can types generated by graphql-codegen, typescript-operations, and typescript-vue-urql be reused as fragments in Vue?

asked 2023-05-19 15:29:45 +0000

bukephalos gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
3

answered 2023-05-19 15:59:01 +0000

lakamha gravatar image

To reuse types generated by graphql-codegen, typescript-operations, and typescript-vue-urql as fragments in Vue, you can follow these steps:

  1. Define the fragment in your GraphQL schema using the fragment keyword:
fragment UserFragment on User {
  name
  email
  ...
}
  1. Use graphql-codegen to generate types for your schema. You can generate types for fragments specifically using the fragment-matcher plugin:
$ npx graphql-codegen --config codegen.yml
schema: http://localhost:3000/api/graphql
documents: path/to/*.graphql
plugins:
  - typescript
  - typescript-operations
  - typescript-vue-urql
  - fragment-matcher:
      typePrefix: "FragmentTypes."
      src: path/to/fragment-types.ts
  1. In your Vue component, import the generated types:
import { UserFragmentFragment } from '@/path/to/fragment-types.ts';
  1. Use the fragment in your GraphQL query/mutation:
<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { useQuery, gql } from '@vue/apollo-composable';
import { UserFragmentFragment } from '@/path/to/fragment-types.ts';

const USERS_QUERY = gql`
  query {
    users {
      ...UserFragment # <-- using the UserFragment as a fragment
    }
  }
  ${UserFragmentFragment}
`;

export default {
  setup() {
    const { result } = useQuery(USERS_QUERY);

    return {
      users: result.value?.data?.users || [],
    };
  },
};
</script>
  1. You can also reuse fragments in mutations:
<template>
  <div>
    <button @click="updateUser(user.id)">Update User</button>
  </div>
</template>

<script lang="ts">
import { useMutation, gql } from '@vue/apollo-composable';
import { UserFragmentFragment } from '@/path/to/fragment-types.ts';

const UPDATE_USER_MUTATION = gql`
  mutation($id: ID!, $data: UserInput!) {
    updateUser(id: $id, data: $data) {
      ...UserFragment # <-- using the UserFragment as a fragment
    }
  }
  ${UserFragmentFragment}
`;

export default {
  props: {
    user: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const { mutate } = useMutation(UPDATE_USER_MUTATION);

    const updateUser = async (id: string) => {
      const data = { /* ... */ };

      await mutate({ id, data });
    };

    return {
      updateUser,
    };
  },
};
</script>
edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2023-05-19 15:29:45 +0000

Seen: 8 times

Last updated: May 19 '23