如何在react钩子中使用graphql钩子集成多个客户端

我想在我的应用程序中集成多个客户端。我通过Apollo客户端使用graphql钩子我们有一个模块来集成多个客户端

以下是Apollo graphql多客户端的链接

    `https://www.npmjs.com/package/@titelmedia/react-apollo-multiple-clients`

下面是我用于graphql钩子的

https://www.npmjs.com/package/graphql-hooks

我们如何为graphql钩子实现同样的功能

我的要求取决于单选按钮的选择，我需要在多个客户端之间切换，所有这些都在一个组件中使用多个客户端。 在我的应用程序中，我使用的是graphql钩子，我们将组件包装到客户端。同一个组件具有功能，根据单选按钮的选择，客户端必须切换。我有一个客户端，但需要集成多个客户端，我在谷歌上搜索过，但我没有发现，因此我在这里提出了疑问。 这可能吗？

---

有人可以帮忙吗？

我们可以多次使用新的GraphQLClient（）来获取多个graphql客户端。

这里有一个很好的方法，您可以遵循它：

我有两个运行的中间件graphql服务器。一个用于应用程序，一个用于分析。根据我的需要，我用两种不同的方式做这件事，如下所示

CubeClient.jsx

import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { SchemaLink } from "apollo-link-schema";
import { makeExecutableSchema } from "graphql-tools";

const cache = new InMemoryCache();
const defaultDashboardItems = [{"vizState":"{\"query\":{\"measures\":[\"Product.count\"],\"timeDimensions\":[{\"dimension\":\"Product.createdAt\"}],\"dimensions\":[\"Producttype.name\"],\"filters\":[],\"order\":{}},\"chartType\":\"bar\",\"orderMembers\":[{\"id\":\"Product.count\",\"title\":\"Product Count\",\"order\":\"none\"},{\"id\":\"Producttype.name\",\"title\":\"Producttype Name\",\"order\":\"none\"},{\"id\":\"Product.createdAt\",\"title\":\"Product Created at\",\"order\":\"none\"}],\"pivotConfig\":{\"x\":[\"Producttype.name\"],\"y\":[\"measures\"],\"fillMissingDates\":true,\"joinDateRange\":false},\"shouldApplyHeuristicOrder\":true,\"sessionGranularity\":null}","name":"Product Types","id":"2","layout":"{\"x\":0,\"y\":0,\"w\":24,\"h\":8}"},{"vizState":"{\"query\":{\"measures\":[\"Sale.total\"],\"timeDimensions\":[{\"dimension\":\"Sale.createdAt\",\"granularity\":\"day\"}],\"dimensions\":[\"Customer.firstname\"],\"order\":{\"Sale.total\":\"desc\"}},\"chartType\":\"area\",\"orderMembers\":[{\"id\":\"Sale.total\",\"title\":\"Sale Total\",\"order\":\"desc\"},{\"id\":\"Customer.firstname\",\"title\":\"Customer Firstname\",\"order\":\"none\"},{\"id\":\"Sale.createdAt\",\"title\":\"Sale Created at\",\"order\":\"none\"}],\"pivotConfig\":{\"x\":[\"Sale.createdAt.day\"],\"y\":[\"Customer.firstname\",\"measures\"],\"fillMissingDates\":true,\"joinDateRange\":false},\"shouldApplyHeuristicOrder\":true}","name":"Sale Total","id":"3","layout":"{\"x\":0,\"y\":8,\"w\":24,\"h\":8}"}]

export function getCubeClient(location){

  const getDashboardItems = () => {
    //   return JSON.parse(window.localStorage.getItem("dashboardItems")) || defaultDashboardItems;
    return defaultDashboardItems
  }

  const setDashboardItems = items => {
    return  window.localStorage.setItem("dashboardItems", JSON.stringify(items));
  }

  const nextId = () => {
    const currentId = parseInt(window.localStorage.getItem("dashboardIdCounter"), 10) || 1;
    window.localStorage.setItem("dashboardIdCounter", currentId + 1);
    return currentId.toString();
  };

  const toApolloItem = i => ({ ...i, __typename: "DashboardItem" });

  const typeDefs = `
    type DashboardItem {
      id: String!
      layout: String
      vizState: String
      name: String
    }

    input DashboardItemInput {
      layout: String
      vizState: String
      name: String
    }

    type Query {
      dashboardItems: [DashboardItem]
      dashboardItem(id: String!): DashboardItem
    }

    type Mutation {
      createDashboardItem(input: DashboardItemInput): DashboardItem
      updateDashboardItem(id: String!, input: DashboardItemInput): DashboardItem
      deleteDashboardItem(id: String!): DashboardItem
    }
  `;
  const schema = makeExecutableSchema({
    typeDefs,
    resolvers: {
      Query: {
        dashboardItems() {
          const dashboardItems = getDashboardItems();
          return dashboardItems.map(toApolloItem);
        },

        dashboardItem(_, { id }) {
          const dashboardItems = getDashboardItems();
          return toApolloItem(dashboardItems.find(i => i.id.toString() === id));
        }
      },
      Mutation: {
        createDashboardItem: (_, { input: { ...item } }) => {
          const dashboardItems = getDashboardItems();
          item = { ...item, id: nextId(), layout: JSON.stringify({}) };
          dashboardItems.push(item);
          setDashboardItems(dashboardItems);
          return toApolloItem(item);
        },
        updateDashboardItem: (_, { id, input: { ...item } }) => {
          const dashboardItems = getDashboardItems();
          item = Object.keys(item)
            .filter(k => !!item[k])
            .map(k => ({
              [k]: item[k]
            }))
            .reduce((a, b) => ({ ...a, ...b }), {});
          const index = dashboardItems.findIndex(i => i.id.toString() === id);
          dashboardItems[index] = { ...dashboardItems[index], ...item };
          setDashboardItems(dashboardItems);
          return toApolloItem(dashboardItems[index]);
        },
        deleteDashboardItem: (_, { id }) => {
          const dashboardItems = getDashboardItems();
          const index = dashboardItems.findIndex(i => i.id.toString() === id);
          const [removedItem] = dashboardItems.splice(index, 1);
          setDashboardItems(dashboardItems);
          return toApolloItem(removedItem);
        }
      }
    }
  });

  return  new ApolloClient({
    cache,
    uri: "http://localhost:4000",
    link: new SchemaLink({
      schema
    })
  });
}

Dashboard.jsx

import { getCubeClient } from './CubeClient';
import { Query } from "react-apollo";

let cubeClient = getCubeClient()

const Dashboard = () => {
  const dashboardItem = item => (
    <div key={item.id} data-grid={defaultLayout(item)}>
      <DashboardItem key={item.id} itemId={item.id} title={item.name}>
        <ChartRenderer vizState={item.vizState} />
      </DashboardItem>
    </div>
  );

return(
  <Query query={GET_DASHBOARD_ITEMS} client={cubeClient}>
    {({ error, loading, data }) => {
      if (error) return <div>"Error!"</div>;
      if (loading) return (
            <div className="alignCenter">
              <Spinner color="#be97e8" size={48} sizeUnit="px" />
            </div>
          );
      if (data) {
        return (<DashboardView t={translate} dashboardItems={data && data.dashboardItems}>
          {data && data.dashboardItems.map(deserializeItem).map(dashboardItem)}
        </DashboardView>)
      } else {
        return <div></div>
      }
    }}
  </Query>
  )
};

TitleModel.jsx

import React from "react";
import { Modal, Input } from "antd";
import { useMutation } from "@apollo/react-hooks";
import { GET_DASHBOARD_ITEMS } from "../graphql/queries";
import {
  CREATE_DASHBOARD_ITEM,
  UPDATE_DASHBOARD_ITEM
} from "../graphql/mutations";
import { getCubeClient } from '../containers/CubeClient';

let cubeClient = getCubeClient()

const TitleModal = ({
  history,
  itemId,
  titleModalVisible,
  setTitleModalVisible,
  setAddingToDashboard,
  finalVizState,
  setTitle,
  finalTitle
}) => {
  const [addDashboardItem] = useMutation(CREATE_DASHBOARD_ITEM, {
    client: cubeClient,
    refetchQueries: [
      {
        query: GET_DASHBOARD_ITEMS
      }
    ]
  });
  const [updateDashboardItem] = useMutation(UPDATE_DASHBOARD_ITEM, {
    client: cubeClient,
    refetchQueries: [
      {
        query: GET_DASHBOARD_ITEMS
      }
    ]
  });

查询和修改.js

import gql from "graphql-tag";

export const GET_DASHBOARD_ITEMS = gql`
  query GetDashboardItems {
    dashboardItems {
      id
      layout
      vizState
      name
    }
  }
`;

export const GET_DASHBOARD_ITEM = gql`
  query GetDashboardItem($id: String!) {
    dashboardItem(id: $id) {
      id
      layout
      vizState
      name
    }
  }
`;

export const CREATE_DASHBOARD_ITEM = gql`
  mutation CreateDashboardItem($input: DashboardItemInput) {
    createDashboardItem(input: $input) {
      id
      layout
      vizState
      name
    }
  }
`;

export const UPDATE_DASHBOARD_ITEM = gql`
  mutation UpdateDashboardItem($id: String!, $input: DashboardItemInput) {
    updateDashboardItem(id: $id, input: $input) {
      id
      layout
      vizState
      name
    }
  }
`;

export const DELETE_DASHBOARD_ITEM = gql`
  mutation DeleteDashboardItem($id: String!) {
    deleteDashboardItem(id: $id) {
      id
      layout
      vizState
      name
    }
  }
`;

---

我不确定我是否理解你的问题。看起来可以多次调用

new GraphQLClient（）

来获取多个

graphql钩子

客户端，就像多次调用

new apollo client（）

来获取多个apollo客户端一样。还有更多吗？是的，在我的应用程序中，我使用graphql钩子，我们将组件包装到客户端。同一个组件的功能取决于选择一个单选按钮，客户端必须切换。我有一个客户端，但需要集成多个客户端，我在谷歌上搜索过，但我没有发现，所以我在这里提出了疑问。是的，在这种情况下，多次调用

new GraphQLClient（）

以获取多个graphql客户端可能没问题。哪个

GraphQLClient

？它在哪里？？？@MohammadReza使用graphql工具在那里你会发现

import gql from "graphql-tag";

export const GET_DASHBOARD_ITEMS = gql`
  query GetDashboardItems {
    dashboardItems {
      id
      layout
      vizState
      name
    }
  }
`;

export const GET_DASHBOARD_ITEM = gql`
  query GetDashboardItem($id: String!) {
    dashboardItem(id: $id) {
      id
      layout
      vizState
      name
    }
  }
`;

export const CREATE_DASHBOARD_ITEM = gql`
  mutation CreateDashboardItem($input: DashboardItemInput) {
    createDashboardItem(input: $input) {
      id
      layout
      vizState
      name
    }
  }
`;

export const UPDATE_DASHBOARD_ITEM = gql`
  mutation UpdateDashboardItem($id: String!, $input: DashboardItemInput) {
    updateDashboardItem(id: $id, input: $input) {
      id
      layout
      vizState
      name
    }
  }
`;

export const DELETE_DASHBOARD_ITEM = gql`
  mutation DeleteDashboardItem($id: String!) {
    deleteDashboardItem(id: $id) {
      id
      layout
      vizState
      name
    }
  }
`;